Draw a line on top of a column chart
Apparently, it is not possible to have a chart with several independant horizontal axis.
What I am trying to achieve is :
- display a bar chart, organized by any category
- overlay a line (actually a single horizontal line) on top of it (to display some sort of threshold)
I tried doing the following :
[Bindable] public var columnsDataProvider : ArrayCollection =
new ArrayCollection([{"Category" : "Cat1", "Value" : 10},
{"Category" : "Cat2", "Value" : 20}]);
[Bindable] public var lineDataProvider : ArrayCollection =
new ArrayCollection([{"X" : 0, "Y" : 10},
{"X" : 1, "Y" : 10}]);
...
<mx:ColumnChart id="columnChart"
showDataTips="true"
columnWidthRatio="0.5"
paddingTop="10"
paddingLeft="5" paddingRight="5"
width="100%" height="100%">
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{columnsDataProvider}" categoryField="Category"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries id="series1" yField="Value" xField="Carrier" dataProvider="{columnsDataProvider}">
<mx:horizontalAxis>
<mx:CategoryAxis id="axis1" categoryField="Category"/>
</mx:horizontalAxis>
</mx:ColumnSeries>
<mx:LineSeries id="series2" yField="Y开发者_开发问答" xField="X" dataProvider=" {lineDataProvider}">
<mx:horizontalAxis>
<mx:LinearAxis id="axis2"/>
</mx:horizontalAxis>
</mx:LineSeries>
</mx:series>
This is the closest to what I want, except that the line does not start span all the graphs vertically (it is drawn only between the two columns of my bar chart).
Is it possible to define a completely independant horizontal axis ?
I also tried drawing directly on the canvas, but the canvas.lineTo() method only works in "data" coordinate ; I would need something that works in "chart/canvas/absolute/whatever" coordinates.
Any help on that ?
Thanks PH
<mx:ColumnChart id="columnChart" dataProvider="{columnsDataProvider}"
showDataTips="true" columnWidthRatio="0.5"
paddingTop="10"
paddingLeft="5" paddingRight="5"
width="100%" height="100%">
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{h1}" />
<mx:AxisRenderer axis="{h2}" visible="false" />
</mx:horizontalAxisRenderers>
<mx:verticalAxis>
<mx:LinearAxis id="v1"/>
</mx:verticalAxis>
<mx:series>
<mx:ColumnSeries id="series1" yField="Value" xField="Category">
<mx:horizontalAxis>
<mx:CategoryAxis id="h1" categoryField="Category"/>
</mx:horizontalAxis>
</mx:ColumnSeries>
<mx:LineSeries yField="Y" xField="X" dataProvider="{lineDataProvider}">
<mx:horizontalAxis>
<mx:LinearAxis id="h2" maximum="1"/>
</mx:horizontalAxis>
</mx:LineSeries>
</mx:series>
精彩评论