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

原创 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的使用(多条曲线图+多条柱状图)

C#绘制曲线图和柱状图

在我们程序开发的过程中经常会需要绘制曲线图和柱状图等,尤其是在做统计功能时。但是有时候我们有觉得没有必要使用第三方控件(例如:ZedGraph等),这是我们可以自己编写代码来实现这些图形绘制的功能。以...

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

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

highcharts做柱状图与曲线图

​1、WebRoot下导入两个js文件,并引入到jsp里 2、创建一个div,存放图 3、开始写js方法,调action,生成图片 var x=[]; var y=[]...

AchartEngineActivity引擎绘制柱状图、曲线图

AchartEngineActivity引擎绘制柱状图、曲线图 1.简介   AChartEngine(简称ACE)是Google的一个开源图表库(for Android)。它功能强大,支持散...

C#绘制曲线图和柱状图

在我们程序开发的过程中经常会需要绘制曲线图和柱状图等,尤其是在做统计功能时。但是有时候我们有觉得没有必要使用第三方控件(例如:ZedGraph等),这是我们可以自己编写代码来实现这些图形绘制的功能。以...

Android之使用AchartEngineActivity引擎绘制柱状图、曲线图

1.简介   AChartEngine(简称ACE)是Google的一个开源图表库(for Android)。它功能强大,支持散点图、折线 。关于里面类的具体使用,请下载响应的文档说明(主页上有...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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