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

I want to show the second line series underneath the first one, however with this code they are appearing sequentially. Not sure how to make sure they are overlayed! I followed some code I saw for combining charts.. not sure what to do.

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

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

2 个解决方案

#1

Your code works fine:

你的代码工作正常：

Check this app.

检查这个应用程序

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

I'm prety sure there's something wrong in your data. Data shoould have the same xValues ranges for both series.

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

#2

I suppose you are looking for something like this: Multiple Chart Areas in .Net.

我想你正在寻找这样的东西：.Net中的多个图表区域。

I was looking for the same in Flex a while back but could not find a way of doing it. I ended up instantiating two LineCharts and placing them inside a VBox and not declaring a horizontal axis for the first one so that it looks like the two are sharing the same x-axis (of the lower one). You will need to assign the same value of gutterLeft to the two so that the vertical axis align correctly.

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

#1