zoukankan      html  css  js  c++  java
  • Flex LineChart 动态添加线(LineSeries)及颜色

    LineChart控件如何动态添加线,并设置线的颜色呢。找了很多资料都没合适的,不容易呀,下面直接上代码。

    <?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" creationComplete="init()">
        <fx:Declarations>
            <!-- 将非可视元素(例如服务、值对象)放在此处 -->
            <mx:Stroke id = "s1" color="blue" weight="2"/> 
        </fx:Declarations>
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <fx:Script>
            <![CDATA[
                import mx.collections.ArrayCollection;
                import mx.charts.series.LineSeries;
                [Bindable]
                public var coll:ArrayCollection = new ArrayCollection([
                    {Date:"2011-12-1",Value:2},
                    {Date:"2011-12-2",Value:4},
                    {Date:"2011-12-3",Value:5},
                    {Date:"2011-12-4",Value:9},
                    {Date:"2011-12-5",Value:6}
                ]);
                
                protected function init():void{
                    var array:Array = new Array();   
                    
                    var lineSeries1:LineSeries=new LineSeries();  //设置图表的系列
                    lineSeries1.xField="Date"
                    lineSeries1.yField = "Value";
                    lineSeries1.displayName="时间趋势图";
                    lineSeries1.setStyle("form", "curve");  
                    lineSeries1.setStyle("lineStroke",s1);
                    array.push( lineSeries1 );
                    myChart.series = array//给图表系列赋值
                }
            ]]>
        </fx:Script>
        <mx:Legend dataProvider="{myChart}" height="20"/>
        <mx:LineChart id="myChart"  dataProvider="{coll}"  width="400" height="360" showDataTips="true">
            <mx:verticalAxis>
                <mx:LinearAxis id="laxis" autoAdjust="true" baseAtZero="false"  />
            </mx:verticalAxis>
            <mx:horizontalAxis>
                <mx:CategoryAxis id="ca"
                                 dataProvider="{coll}"
                                 categoryField="Date"
                                 />
                
            </mx:horizontalAxis>
            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer axis="{ca}"
                                 canDropLabels="true" />
            </mx:horizontalAxisRenderers>
            <mx:series>
            </mx:series>
        </mx:LineChart>
    </s:Application>
  • 相关阅读:
    黄聪:基于jQuery+JSON的省市区三级地区联动
    黄聪:jquery 校验中国身份证号码
    黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)
    黄聪:MySQL 按指定字段自定义列表排序
    黄聪:MYSQL使服务器内存CPU占用过高问题的分析及解决方法
    黄聪:PHP 防护XSS,SQL,代码执行,文件包含等多种高危漏洞
    黄聪:解决丢失api-ms-win-crt-runtime-|1-1-0.dll的问题:vc_redist.x64
    黄聪:如何开启IIS7以上的“IIS6管理兼容性”
    黄聪:怎么清理win7、win8更新垃圾(winsxs目录清理)
    黄聪:Mysql5.6缓存命中率
  • 原文地址:https://www.cnblogs.com/Anlycp/p/2285160.html
Copyright © 2011-2022 走看看