`

flex中定制linechart等图表坐标轴线条粗细、颜色

    博客分类:
  • flex
 
阅读更多

应用需要,希望将坐标轴的刻度线颜色进行修改定制,但是晚上搜了一通,没找到答案,反复研究帮助文档等资料,发现其实很简单,就是自己指定AxisRenderer代替默认的就可以了

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" horizontalScrollPolicy="off" verticalScrollPolicy="off" initialize="onInit(event)">
<!-- 定制线条样式. -->
<mx:Stroke id="chartStroke" color="0xE48701" weight="1"/>
<!-- 定制坐标轴样式. -->
<mx:Stroke id="chartAxisStroke" color="0x000000"/>
<mx:Stroke id="chartAxisStrokeThick" caps="square" color="0x666666" weight="6" />
<mx:VBox percentWidth="100" percentHeight="100">
<mx:LineChart id="chart" x="0" y="0" percentWidth="100" percentHeight="100" showDataTips="true" dataTipFunction="{chartDataTipProc}">
<mx:backgroundElements>
<!-- 定制图表水平网格线 -->
<mx:GridLines id="gridLines" direction="horizontal">
<mx:horizontalStroke>
<mx:Stroke color="#AAAAAA" weight="1" alpha="1" />
</mx:horizontalStroke>
</mx:GridLines>
</mx:backgroundElements>
<mx:horizontalAxis>
<mx:DateTimeAxis id="chartXAxis" dataUnits="hours" labelFunction="{chartDateAxisLabelProc}" parseFunction="{chartDateParseProc}" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<!-- 定制横坐标 -->
<mx:AxisRenderer axis="{chartXAxis}" axisStroke="{chartAxisStroke}" color="#000000" tickStroke="{chartAxisStroke}" />
</mx:horizontalAxisRenderers>
<mx:verticalAxis>
<mx:LinearAxis id="chartYAxis" autoAdjust="false" baseAtZero="false" padding="0" title="水位(m)" />
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<!-- 定制纵坐标 -->
<mx:AxisRenderer axis="{chartYAxis}" axisStroke="{chartAxisStrokeThick}" color="#000000" tickStroke="{chartAxisStroke}" />
</mx:verticalAxisRenderers>
<mx:series>
<mx:LineSeries id="chartSeries" xField="TM" yField="VAL" form="curve" displayName="" lineStroke="{chartStroke}" radius="3"
itemRenderer="mx.charts.renderers.CircleItemRenderer" showDataEffect="{chartEffectZoom}" />
</mx:series>
</mx:LineChart>
</mx:VBox>
</mx:Application>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics