代码之家  ›  专栏  ›  技术社区  ›  phtrivier

在柱形图的顶部画一条线

  •  1
  • phtrivier  · 技术社区  · 14 年前

    显然,不可能有一个有几个独立水平轴的图表。

    我想达到的目标是:

    • 显示按任何类别组织的条形图
    • 在它上面覆盖一条线(实际上是一条水平线)(以显示某种阈值)

    我尝试了以下操作:

    [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>
    

    这是最接近我想要的,除了这条线不是垂直横跨所有图形(它只在条形图的两列之间绘制)。

    是否可以定义一个完全独立的水平轴?

    我还尝试直接在画布上绘图,但是canvas.lineto()方法只能在“数据”坐标下工作;我需要在“图表/画布/绝对/任何”坐标下工作的东西。

    有什么帮助吗?

    谢谢 酸碱度

    1 回复  |  直到 9 年前
        1
  •  2
  •   andi    13 年前
    <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>