开发者

Can I have a flex chart that has both plots and lines?

开发者 https://www.devze.com 2023-02-22 03:12 出处:网络
Flex has a plotchart component and a linechart component.. but I am looking to make a chart that has lines connecting 开发者_如何学运维points as well as larger dots with rollover info. Is this easily

Flex has a plotchart component and a linechart component.. but I am looking to make a chart that has lines connecting 开发者_如何学运维points as well as larger dots with rollover info. Is this easily possible? Would I have to create a custom component from scratch to achieve this?


It looks like what you need is a LineChart with itemRenderer rather than a mixed type chart.

Have a look at Displaying data points in Flex Line chart


If I understand you correctly, you want a chart with multiple series, of different display types. This is pretty easy to do in Flex. This article on multiple-series charts should get you started.

If you need Flex 3, try this article.

Here is a very basic example of a plot+line chart. It's not pretty at all, but it might give you an idea of how to get going.

<?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>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var plotData:ArrayCollection = new ArrayCollection([
                {xVal: 1, yVal: 5},
                {xVal: 2, yVal: 10},
                {xVal: 3, yVal: 15}
            ]);

            [Bindable]
            private var lineData:ArrayCollection = new ArrayCollection([
                {xVal: 1, yVal: 4},
                {xVal: 2, yVal: 1},
                {xVal: 3, yVal: 10}
            ]);
        ]]>
    </fx:Script>
    <mx:LineChart id="myChart"
                  showDataTips="true"
                  height="250"
                  width="350">
        <mx:horizontalAxis>
            <mx:LinearAxis minimum="0" maximum="20" />
        </mx:horizontalAxis>
        <mx:verticalAxis>
            <mx:LinearAxis minimum="0" maximum="20" />
        </mx:verticalAxis>
        <mx:series>
            <mx:PlotSeries
                dataProvider="{plotData}"
                xField="xVal"
                yField="yVal">
            </mx:PlotSeries>
            <mx:LineSeries
                dataProvider="{lineData}"
                xField="xVal"
                yField="yVal">
            </mx:LineSeries>
        </mx:series>
    </mx:LineChart>
</s:Application>
0

精彩评论

暂无评论...
验证码 换一张
取 消