fusionChart的使用

最新推荐文章于 2021-04-03 21:02:41 发布

高新普惠_搬砖手

最新推荐文章于 2021-04-03 21:02:41 发布

阅读量4.1k

点赞数

分类专栏： j2ee框架文章标签： annotations 图形 xml javascript application flex

本文链接：https://blog.csdn.net/dananhai381/article/details/5753238

版权

j2ee框架专栏收录该内容

50 篇文章 0 订阅

订阅专栏

flex的使用：

1. 后台数据的构造

应该构造ChartData对象，其中包括 ChartStyle,RowData, TrendLine等对象，在ChartData.toXML()中完成组装并输出。

对于定时更新数据，chart的数据只需要部分发生变化，如RowData，则只需奥构造该部分的xml

对于不同的图形，其style可能一样也可能不一样，则应该将sytle和data分开，从而更加灵活，如下：

 <ns1:FusionCharts x="10" y="10" FCChartType="Column3D">

          <ns1:FCChartData FCData="{chartData.data[0]}" FCParams="{chartParams.param[0]}"/>

 </ns1:FusionCharts>

      <mx:Script>

         <![CDATA[

              //Create a xmlList object for chart data

              [Bindable]

              private var chartData:XML=

                    <main>

                          <data>

                                <data label='Jan' value='17400' />

                                <data label='Feb' value='19800' />

                                <data label='Mar' value='21800' />

                                <data label='April' value='23000'/>

                                <data label='May' value='29000' />

                                <data label='Jun' value='27600' />

                          </data>

                    </main>;

              //Create a xmlList object for chart parameters

              [Bindable]

              private var chartParams:XML=

                  <main>

                        <param>

                              <params caption='Half Yearly Sales Summary'

                                subcaption='For the year 2008 - First Half'

                                xAxisName='Month'

                                yAxisName='Sales' numberPrefix='$' />

                        </param>

                   </main>;

]]>

      </mx:Script>

 2. 使用<styles>定义Font， Glow等样式

 3. Annotations：Annotations can be used to highlight special areas of your

 widget or simply to spruce up its appearance。用于在chart中shape,image, text

，如HealthGaugeCanvas中的文字就可以使用annotations实现

 4. realtime update（只有widget才支持）

    方法：在xml数据中指定 refreshInterval和dataStreamURL

 5. Flex Examples by Case

   1. 数据格式化:见 Flex-Examples By Case中的Number Formatting

    前缀和后缀， 小数位（decimals），刻度的精度

   2. drill down example

    Full Chart as a hotspot ： 缩略图点击效果

    FCClickEvent，并通过link=”S-”传递参数

   3. 动态改变chart data

    chart.FCData()  chart.FCParams() fc.FCRender() 可以基于对点击事件的监听；

 使用timer组件完成定时调用，从而得到real-time数据

   4. FusionChart in Flex Containers

    Box VBox HBox  Panel  Accordion Grid Canvas Tab Navigator  TitleWindow,都是

mx为 前缀的

   5. fusionchart 100% 宽高之谜

    可能在s:application中会有问题，在mx：Application 好像可以。

6. 声明trendLine

用来显示 trends, targets, 可以在data xml 中使用trendLine节点定义

7. tooltip实现换行，如

tooltext='John Miller{br}Score: 420{br}Rank:2'

8. 修改chart 默认提示信息(Changing Chart Messages)

修改<fusion:FCChartData>对应属性，具体参考文档

9. Chart Using Remote Data

When chart is generated，服务器端数据还没有返回时，就需要同步了。原因是：只有FCRenderEvent对象触发后，FusionCharts对象的函数才可以使用。

解决方法：同步RemoteObject的ResultEvent 和FusionChart的FCRenderEvent 事件,就是保证FCRenderEvent触发之后再调用 Chart.setDataXML函数。具体代码如下：

 <ns1:FusionCharts id="fc" FCChartType="Column2D" FCRenderEvent="{onRender()}" />        <mx:HTTPService id="service" url="someData.xml" result="{onResult(event)}" resultFormat="xml" />          <mx:Script>               
 <![CDATA[                                              
 import mx.rpc.events.ResultEvent;                                                                       
private var dataXML:String = "";                       
 private var hasRendered:Boolean = false;                                                
private function onResult(e:ResultEvent):void {                               
      dataXML = e.result.toString();                               
      setData();                        
}                                              
private function onRender():void { 
      hasRendered = true;             
      setData();                        
}                                               
private function setData():void {
       if(hasRendered) { 
                 fc.FCSetDataXML(dataXML);
}                       
 }                
]]>        
</mx:Script>