Question

我想在第一行下面显示第二行系列，但是使用此代码它们会按顺序显示。不知道如何确保它们被覆盖！我遵循了一些我看到的用于组合图表的代码。不知道该怎么做。

<mx:LineChart  showDataTips="true" x="10" y="77" id="GlucoseChart"  width="1009" height="219">
    <mx:horizontalAxis>
        <mx:DateTimeAxis dataUnits="hours" parseFunction="parseDateString" displayLocalTime="true" />
    </mx:horizontalAxis>
    <mx:series>
        <mx:LineSeries id="glucoseSeries" radius="8" form="curve" displayName="BG" yField="Value" xField="DateTime">
            <mx:itemRenderer>
                <fx:Component>
                    <mx:CircleItemRenderer />
                </fx:Component>
            </mx:itemRenderer>
        </mx:LineSeries>

        <mx:LineSeries radius="2" id="glucoseOverlaySeries1" yField="Value" xField="DateTime" interactive="false">
            <mx:itemRenderer>
                <fx:Component>
                    <mx:CircleItemRenderer />
                </fx:Component>
            </mx:itemRenderer>
        </mx:LineSeries>
    </mx:series>
</mx:LineChart>

Answer 1

您的代码运行良好：

检查此应用。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;

            private static function createData(num:int):Array
            {
                var i:int;
                var arr:Array = new Array();
                var now:Date = new Date();
                now = new Date(now.fullYear, now.month, now.date);
                var curr:Date;
                var o:Object;
                var val:Number;
                for (i=0; i< num; i++)
                {
                    curr = new Date(
                        now.fullYear, 
                        now.month, 
                        now.date - (num - i - 1)
                        )
                    val = Math.random()*100;
                    o = new Object();
                    o.DateTime = curr;
                    o.Value = val;
                    arr.push(o);
                }
                return arr;
            }

            [Bindable]
            private var glucoseSeriesData:Array = createData(14);
            [Bindable]
            private var glucoseSeriesData1:Array = createData(14);


        ]]>
    </fx:Script>


    <mx:LineChart  showDataTips="true" x="10" y="77" id="GlucoseChart"  width="1009" height="219">
        <mx:verticalAxis>
            <mx:LinearAxis/>
        </mx:verticalAxis>
        <mx:horizontalAxis>
            <mx:DateTimeAxis dataUnits="days" displayLocalTime="true" />
        </mx:horizontalAxis>
        <mx:series>
            <mx:LineSeries id="glucoseSeries" radius="8" form="curve" displayName="BG" 
                           yField="Value" xField="DateTime"
                           dataProvider="{glucoseSeriesData}"
                           >
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:CircleItemRenderer />
                    </fx:Component>
                </mx:itemRenderer>
            </mx:LineSeries>
            <mx:LineSeries radius="2" id="glucoseOverlaySeries1" 
                           yField="Value"  xField="DateTime" 
                           interactive="false"
                           dataProvider="{glucoseSeriesData1}"
                           >
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:CircleItemRenderer />
                    </fx:Component>
                </mx:itemRenderer>
            </mx:LineSeries>
        </mx:series>
    </mx:LineChart> 

</s:Application>

我确定你的数据有问题。数据对于两个系列都具有相同的xValues范围。

Answer 2

我想你正在寻找这样的事情：Multiple Chart Areas in .Net。

我一直在寻找Flex中的相同内容，但无法找到一种方法。我最终实例化了两个LineCharts并将它们放在一个VBox中，而没有为第一个声明一个水平轴，这样它们看起来就像两个共享相同的x轴（较低的一个）。您需要将相同的gutterLeft值分配给两个，以便垂直轴正确对齐。

单个图表控件上的多行系列

2 个答案: