FLEX Chart: Using multiple data series

最新推荐文章于 2025-10-04 13:43:43 发布

转载最新推荐文章于 2025-10-04 13:43:43 发布 · 1.8k 阅读

文章标签：

#flex #date #charts #application #plot #each

Flex 专栏收录该内容

188 篇文章

订阅专栏

Charts that are subclasses of the CartesianChart class let you mix different data series in the same chart control. You can create a column chart with a trend line running through it or mix any data series with any other similar series.

The following chart tracks two stocks, one represented by a column (using a ColumnSeries) and the other represented by a line (using a LineSeries):

You can use any combination of the following series objects in a CartesianChart control:

The following example mixes a LineSeries and a ColumnSeries:

<?xml version="1.0"?>
<!-- charts/MultipleSeries.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500"
height="600">
  <mx:Script>
    <![CDATA[
        [Bindable]
        public var SMITH:Array = [
           {date:"22-Aug-05", close:45.87},
           {date:"23-Aug-05", close:45.74},
           {date:"24-Aug-05", close:45.77},
           {date:"25-Aug-05", close:46.06},
        ];
        [Bindable]
        public var DECKER:Array = [
           {date:"22-Aug-05", close:45.59},
           {date:"23-Aug-05", close:45.3},
           {date:"24-Aug-05", close:46.71},
           {date:"25-Aug-05", close:46.88},
        ];
    ]]>
  </mx:Script>

  <mx:Panel title="Multiple Data Series" width="400" height="400">
     <mx:ColumnChart id="myChart"
        dataProvider="{SMITH}"
        showDataTips="true"
        height="250"
        width="350"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="date"/>
        </mx:horizontalAxis>
        <mx:verticalAxis>
           <mx:LinearAxis minimum="40" maximum="50"/>
        </mx:verticalAxis>
        <mx:series>
           <mx:ColumnSeries
                dataProvider="{SMITH}"
                xField="date"
                yField="close"
                displayName="SMITH"
           >
           </mx:ColumnSeries>
           <mx:LineSeries
                dataProvider="{DECKER}"
                xField="date"
                yField="close"
                displayName="DECKER"
           >
           </mx:LineSeries>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

(注: 如果想要显示两组柱状图比较数据,将代码中的<mx:LineSeries>替换成<mx:ColumnSeries>即可)
The executing SWF file for the previous example is shown below:

Using multiple series in the same chart works best when the data points are in a similar range (such as a stock price and its moving average). When the data points are in numerically very different ranges, the chart can be difficult to understand because the data is shown on a single axis. The solution to this problem is to use multiple axes, each with its own range. You can plot each data series on its own axis within the same chart using the techniques described in Using multiple axes.

本文转自: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_11.html