柱状图,曲线图显示数据结点

原创 2013年12月05日 22:59:33

Using strokes with chart controls

You use the Stroke class with the chart series and grid lines to control the properties of the lines that Flex uses to draw chart elements.

The following table describes the properties that you use to control the appearance of strokes:

Property

Description

color

Specifies the color of the line as a hexadecimal value. The default value is 0x000000, which corresponds to black.

weight

Specifies the width of the line, in pixels. The default value is 0, which corresponds to a hairline.

alpha

Specifies the transparency of a line. Valid values are 0 (invisible) through 100 (opaque). The default value is 100.

The following example defines a line width of 2 pixels, one with a dark gray border (0x808080) and the other with a light gray border (0xC0C0C0) for the borders of chart items in aBarChart control's BarSeries:

<?xml version="1.0"?>
<!-- charts/BasicBarStroke.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500},
        {Month:"Feb", Profit:1000, Expenses:200},
        {Month:"Mar", Profit:1500, Expenses:500}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Bar Chart">
     <mx:BarChart id="myChart" dataProvider="{expenses}" showDataTips="true">
        <mx:verticalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:verticalAxis>
        <mx:series>
           <mx:BarSeries 
                yField="Month" 
                xField="Profit" 
                displayName="Profit"
            >
            <mx:stroke>
                <mx:Stroke 
                    color="0x808080" 
                    weight="2" 
                    alpha=".8"
                />
            </mx:stroke>
           </mx:BarSeries>
           <mx:BarSeries 
                yField="Month" 
                xField="Expenses" 
                displayName="Expenses"
           >
            <mx:stroke>
                <mx:Stroke 
                    color="0xC0C0C0" 
                    weight="2" 
                    alpha=".8"
                />
            </mx:stroke>
           </mx:BarSeries>
        </mx:series>
     </mx:BarChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

The executing SWF file for the previous example is shown below:

Defining AxisRenderer properties with strokes

You can use strokes to define tick marks and other properties of an AxisRenderer, as the following example shows:

<?xml version="1.0"?>
<!-- charts/AxisRendererStrokes.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
        [Bindable]
        public var aapl:Array = [
            {date:"1-Aug-05",open:42.57,high:43.08,low:42.08,close:42.75},
            {date:"2-Aug-05",open:42.89,high:43.5,low:42.61,close:43.19},
            {date:"3-Aug-05",open:43.19,high:43.31,low:42.77,close:43.22},
            {date:"4-Aug-05",open:42.89,high:43,low:42.29,close:42.71},
            {date:"5-Aug-05",open:42.49,high:43.36,low:42.02,close:42.99},
            {date:"8-Aug-05",open:43,high:43.25,low:42.61,close:42.65},
            {date:"9-Aug-05",open:42.93,high:43.89,low:42.91,close:43.82},
            {date:"10-Aug-05",open:44,high:44.39,low:43.31,close:43.38},
            {date:"11-Aug-05",open:43.39,high:44.12,low:43.25,close:44},
            {date:"12-Aug-05",open:43.46,high:46.22,low:43.36,close:46.1},
        ];
    ]]></mx:Script>

    <mx:HLOCChart id="myChart" 
        dataProvider="{aapl}" 
        showDataTips="true"
    >
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer 
                placement="bottom" 
                canDropLabels="true"
                tickPlacement="inside" 
                tickLength="10" 
                minorTickPlacement="inside" 
                minorTickLength="5"
                axis="{a1}"
            >
                <mx:axisStroke>
                    <mx:Stroke color="#000080" weight="1"/>
                </mx:axisStroke>

                <mx:tickStroke>
                    <mx:Stroke color="#000060" weight="1"/>
                </mx:tickStroke>

                <mx:minorTickStroke>
                    <mx:Stroke color="#100040" weight="1"/>
                </mx:minorTickStroke>
            </mx:AxisRenderer>
        </mx:horizontalAxisRenderers>

        <mx:verticalAxis>
            <mx:LinearAxis 
                id="a1"
                minimum="30" 
                maximum="50"
            />
        </mx:verticalAxis>

        <mx:series>
            <mx:HLOCSeries 
                dataProvider="{aapl}" 
                openField="open"
                highField="high" 
                lowField="low" 
                closeField="close"
                displayName="AAPL"
            >
            </mx:HLOCSeries>
        </mx:series>
    </mx:HLOCChart>
    <mx:Legend dataProvider="{myChart}"/>
</mx:Application>

The executing SWF file for the previous example is shown below:

Notice that any time you use an AxisRenderer, you must explicitly set the axis to which it is applied with the renderer's axis property.

You can define a stroke object using an MXML tag, and then bind that stroke object to the chart's renderer properties. For an example, see Applying styles by binding tag definitions.

Using strokes in ActionScript

You can instantiate and manipulate a Stroke object in ActionScript by using the mx.graphics.Stroke class. You can then use the setStyle() method to apply the Stroke object to the chart, as the following example shows:

<?xml version="1.0"?>
<!-- charts/ActionScriptStroke.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     import mx.graphics.Stroke;

     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month: "Jan", Profit: 2000, Expenses: 1500},
        {Month: "Feb", Profit: 1000, Expenses: 200},
        {Month: "Mar", Profit: 1500, Expenses: 500}
     ]);

     public function changeStroke(e:Event):void {
        var s:Stroke = new Stroke(0x001100,2);
        s.alpha = .5;
        s.color = 0x0000FF;
        har1.setStyle("axisStroke",s);
        var1.setStyle("axisStroke",s);
     }
  ]]></mx:Script>

  <mx:Stroke id="baseAxisStroke" 
    color="0x884422" 
    weight="10" 
    alpha=".25" 
    caps="square"
  />

  <mx:Panel title="Column Chart">
     <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                id="a1"
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>

        <mx:horizontalAxisRenderers>
           <mx:AxisRenderer id="har1" axis="{a1}">
                <mx:axisStroke>{baseAxisStroke}</mx:axisStroke>
           </mx:AxisRenderer>
        </mx:horizontalAxisRenderers>

        <mx:verticalAxisRenderers>
           <mx:AxisRenderer id="var1" axis="{a1}">
                <mx:axisStroke>{baseAxisStroke}</mx:axisStroke>
           </mx:AxisRenderer>
        </mx:verticalAxisRenderers>

        <mx:series>
           <mx:ColumnSeries 
                xField="Month" 
                yField="Profit"
                displayName="Profit"
           />
           <mx:ColumnSeries 
                xField="Month" 
                yField="Expenses"
                displayName="Expenses"
           />
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
  <mx:Button id="b1"
    click="changeStroke(event)"
    label="Change Stroke"
  />
</mx:Application>

The executing SWF file for the previous example is shown below:

Defining strokes for LineSeries and AreaSeries

Some chart series have more than one stroke-related style property. For LineSeries, you use the stroke style property to define a style for the chart item's renderer. You use thelineStroke property to define the stroke of the actual line segments.

The following example creates a thick blue line for the LineChart control's line segments, with large red boxes at each data point, which use the CrossItemRenderer object as their renderer:

<?xml version="1.0"?>
<!-- charts/LineSeriesStrokes.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
        {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
        {Month:"Mar", Profit:1500, Expenses:500, Amount:300}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Line Chart">
     <mx:LineChart id="myChart" 
        dataProvider="{expenses}"
        showDataTips="true"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>
        <mx:series>
           <mx:LineSeries 
            yField="Profit" 
            displayName="Profit"
           >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:CrossItemRenderer 
                        scaleX="1.5" 
                        scaleY="1.5"
                    />
                </mx:Component>
            </mx:itemRenderer>
            <mx:fill>
                <mx:SolidColor 
                    color="0x0000FF"
                />
            </mx:fill>
            <mx:stroke>
                <mx:Stroke 
                    color="0xFF0066" 
                    alpha="1"
                />
            </mx:stroke>
            <mx:lineStroke>
                <mx:Stroke 
                    color="0x33FFFF" 
                    weight="5" 
                    alpha=".8"
                />
            </mx:lineStroke>
           </mx:LineSeries>
           <mx:LineSeries 
                yField="Expenses" 
                displayName="Expenses"
           />
        </mx:series>
     </mx:LineChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

The executing SWF file for the previous example is shown below:

Similarly, with the AreaSeries class, you use the stroke property to set a style for the chart item's renderer. You use the areaStroke style property to define the stroke of the line that defines the area.






http://livedocs.adobe.com/flex/3/html/help.html?content=charts_formatting_06.html

C#中wpf使用Devexpress画图:柱状图,饼状图,散点图,曲线图

C#中wpf使用Devexpress画图:柱状图,饼状图,散点图,曲线图1.效果 完整代码下载: 下图是随便生成的数据测试效果: C#中wpf使用Devexpress画图 2.部分设置可以从控...

Android图表控件MPAndroidChart——曲线图+柱状图 CombinedChart的使用

Android图表控件MPAndroidChart——组合图CombinedChart的使用(多条曲线图+多条柱状图)...

对highcharts的总结(饼图、柱状图、折线图、曲线图)

1,饼图 Highcharts Example g.highcharts-grid:nth-child(6) > path { ...

jfreechart 曲线图 3d饼图 3d柱状图

  • 2008年12月28日 04:39
  • 1.37MB
  • 下载

iOS 中各种折线.曲线.图形绘制方法集锦(折线图.走势图.柱状图.动态曲线图.形状图.划线图)

前言具体实现如下:目录前言第一 折线图实现.1) 自定义视图实现.2)关键技术实现.3) 方法调用.4) 效果展示第二 走势曲线图实现.1) 导入DJChart第三方库.2)横竖轴参数设置.3) ...

dev实现实现柱状图,曲线图

  • 2015年09月02日 16:05
  • 12.18MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:柱状图,曲线图显示数据结点
举报原因:
原因补充:

(最多只允许输入30个字)