Рисование пунктирной линии на вершинах Flex Column Chart - PullRequest
Новая
       44

Рисование пунктирной линии на вершинах Flex Column Chart

2 голосов
/ 15 марта 2010

Пожалуйста, найдите ниже код 

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
 <![CDATA[
  [Bindable]
        public var testAC:Array = [
           {date:"without", close:50},
           {date:"with", close:45}           
        ];

 ]]>
</mx:Script>
 <mx:ColumnChart id="myChart" dataProvider="{testAC}">
  <mx:horizontalAxis>
   <mx:CategoryAxis categoryField="date"/>
  </mx:horizontalAxis>
  <mx:verticalAxis>
   <mx:CategoryAxis categoryField="close"/>
  </mx:verticalAxis>
  <mx:series>
   <mx:ColumnSeries dataProvider="{testAC}" xField="date" yField="close"/>
   <mx:LineSeries dataProvider="{testAC}" xField="date" yField="close"/>
  </mx:series>
 </mx:ColumnChart>
</mx:Application>

Этот код рисует диаграмму столбца с двумя столбцами и рисует линию в верхней части обоих столбцов. У меня есть два требования:

  1. линия должна быть пунктирной
  2. на данный момент строка начинается от верхнего правого угла первого столбца до того же угла второго столбца. Как я могу сместить линию влево, чтобы она начиналась от центра первого столбца к центру второго столбца.

С уважением, PK

Ответы [ 3 ]

2 голосов
/ 19 мая 2010

Вы можете нарисовать линию между двумя значениями на декартовой диаграмме с помощью 

<mx:Script><![CDATA[
    private function connectTwoPoints(
        month1:String, value1:Number, 
        month2:String, value2:Number):void 
    {
        // Draw Line
        canvas.clear();
        canvas.lineStyle(4, 
            0xCCCCCC, 
            .75, 
            true, 
            LineScaleMode.NORMAL, 
            CapsStyle.ROUND, 
            JointStyle.MITER, 
            2);
        canvas.moveTo(month1, value1);
        canvas.lineTo(month2, value2);
    }
]]></mx:Script>

<mx:annotationElements>
    <mx:CartesianDataCanvas id="canvas" includeInRanges="true"/>
</mx:annotationElements>

Линия, которую вы нарисуете, будет «Элементом аннотации» с использованием «Декартовой канвы данных». Элементы аннотации нарисованы на переднем плане. Идеальный пример:
http://livedocs.adobe.com/flex/3/html/help.html?content=charts_eventsandeffects_13.html

1 голос
/ 25 марта 2010

после долгих исследований я наконец-то закончил рисовать пунктирную линию. Я использовал DashedGraphicUtilities, предоставленные самой Adobe, чтобы нарисовать пунктирную линию. Я расширил LineSeries и использовал эту DashedGraphicUtilities, чтобы нарисовать пунктирную линию. Это решило мою первую проблему с почтой. Я буду обновлять это всякий раз, когда получу решение на секунду.

И я получил решение и для второй проблемы. Линейный график отображался идеально по мере необходимости, когда я изменил тип графика с ColumnChart на CartesianChart. Внутри я использовал ряды столбцов и ряды линий, и линии и столбцы шли идеально.

С уважением, Anoop

1 голос
/ 15 марта 2010

Для многих моих карт со сложным скином я использовал Axiis. Он очень похож на Degrafa и позволит вам сделать удар Degrafa и поместить его в любое место на вашем «dataCanvas».

Вот пример, который довольно прямолинеен: http://axiis.org/examples/HClusterStackExample.html

'Это не лучший ответ в этой области, но использование оси очень просто, и, тем не менее, оно позволяет выполнять сложные заливки и обводки, которые не разрешены через mxml с простым-гибким графиком.

Удачи, Джереми

...