Могу ли я иметь гибкий график, который имеет как графики, так и линии? - PullRequest
Новая
       38

Могу ли я иметь гибкий график, который имеет как графики, так и линии?

2 голосов
/ 06 апреля 2011

Во Flex есть компонент для диаграмм и линейных диаграмм ... но я хочу создать диаграмму, в которой есть линии, соединяющие точки, а также более крупные точки с информацией о переходах. Это легко возможно? Должен ли я создать собственный компонент с нуля, чтобы добиться этого?

Ответы [ 2 ]

3 голосов
/ 06 апреля 2011

Похоже, вам нужна линейная диаграмма с itemRenderer, а не диаграмма смешанного типа.

Посмотрите на Отображение точек данных на диаграмме Flex Line

3 голосов
/ 06 апреля 2011

Если я вас правильно понимаю, вам нужен график с несколькими сериями, с разными типами отображения. Это довольно легко сделать во Flex. Эта статья на графиках нескольких серий должна помочь вам начать работу.

Если вам нужен Flex 3, попробуйте эту статью .

Вот очень базовый пример графика + линейный график. Это совсем не красиво, но может дать вам представление о том, как начать. 

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