单一图表控件上的多线系列

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

我想您正在寻找这样的东西： .Net 中的多个图表区域< /a>.

不久前我在 Flex 中寻找相同的东西，但找不到一种方法。我最终实例化了两个折线图并将它们放置在 VBox 中，并且没有声明第一个折线图的水平轴，这样看起来两个折线图共享相同的 x 轴（下部的 x 轴）。您需要为两者分配相同的 gutterLeft 值，以便垂直轴正确对齐。