fushion chart的使用

    前段时间由于项目中需要使用flash图表，因此花了些时间研究了下fushion chart。目前的fushion chart已经更新到v3版本，所实现的图表类型比之前的多了许多。除了实现日常常见的一些chart，如柱状图、饼图、折线图、复合图等以外，还提供了一些小仪器类型的图表如：各种类型的仪表、温度计、直尺、锥形图等；另外还提供了各种类型的地图图表。

 

    fushion chart V3支持的数据格式有两种，xml或json格式，可以将数据保存到一个单独的文件中供flash调用或者通过js将数据以字符串的形式设置到图表所对应的flash中。

以下以一个例子简要介绍在我们的页面中集成fushion chart,

 

首先将下载下来的FushionChart.js与AngularGauge.swf文件放到相应的目录下供页面引用，

在页面中引入js文件并加入如下内容

<div id="chartdiv" align="center" class="text">

 

<script type="text/javascript">
 var myChart = new FusionCharts("Charts/AngularGauge.swf", "myChartId", "330", "300", "0", "0");
 myChart.setDataURL("Data/Angular9.xml");

myChart.render("chartdiv");
</script>

 

 Angular9.xml就是数据文件，如果不想将数据保存到单独的文件中的话，可以使用myChart.setDataXML("xxx")或setJSONData({XXX})来替换。

 Angular9.xml文件内容如下：

 

- < chart bgColor =" 000000 " bgAlpha =" 100 " gaugestartAngle =" 235 " gaugeendAngle =" -55 " lowerLimit =" 0 " upperLimit =" 10 " majorTMNumber =" 11 " majorTMThickness =" 5 " majorTMColor =" F48900 " majorTMHeight =" 15 " minorTMNumber =" 4 " minorTMThickness =" 2 " minorTMColor =" FFFFFF " minorTMHeight =" 13 " placeValuesInside =" 1 " gaugeOuterRadius =" 140 " gaugeInnerRadius =" 85%25 " baseFontColor =" F48900 " baseFont =" Impact " baseFontSize =" 30 " showShadow =" 0 " pivotRadius =" 20 " pivotFillColor =" 000000,383836 " pivotFillType =" linear " pivotFillRatio =" 50,50 " pivotFillAngle =" 240 " annRenderDelay =" 0 ">

- < dials >

  < dial value =" 5 " color =" E70E00 " borderColor =" E70E00 " baseWidth =" 25 " topWidth =" 1 " radius =" 85 " />

  </ dials >

- < trendpoints >

  < point startValue =" 8 " endValue =" 10 " radius =" 140 " innerRadius =" 0 " color =" F48900 " alpha =" 35 " showBorder =" 0 " />

  </ trendpoints >

- < annotations autoScale =" 0 ">

- < annotationGroup id =" Grp1 " showBelow =" 0 " xScale =" 200 " yScale =" 120 " x =" 164 " y =" 157 ">

  < annotation type =" circle " x =" 0 " y =" 0 " color =" FFFFFF " alpha =" 15 " radius =" 7 " />

  </ annotationGroup >

  </ annotations >

- < styles >

- < definition >

  < style name =" pivotGlow " type =" glow " color =" F48900 " blurX =" 15 " blurY =" 15 " alpha =" 60 " />

  < style name =" circleBlur " type =" blur " />

  < style name =" TTipFont " type =" font " color =" F48900 " bgColor =" 000000 " borderColor =" F48900 " font =" Verdana " size =" 10 " />

  </ definition >

- < application >

  < apply toObject =" PIVOT " styles =" pivotGlow " />

  < apply toObject =" Grp1 " styles =" circleBlur " />

  < apply toObject =" TOOLTIP " styles =" TTipFont " />

  </ application >

  </ styles >

  </ chart >

 

      需要注意的是在我们使用过程中，我们往往会将js与flash放到静态资源服务器上，这往往也就意味着应用项目与flash文件需要使用不同的域名来访问，而在flash渲染的过程中，FushionChart.js文件中的一个函数会去调用flash文件中的一个方法，因此会产生跨域调用的问题，虽然这没有影响到图表的正常显示，不过在浏览器上老是提示脚本异常，很是烦人，所以得想办法解决。解决的办法有两种，一是在flash文件的源码中加入Security.allowDomain("xxx.xxx");二是将flash文件放到应用服务器上来，由于fushion chart是商业软件没有提供源码，所以我们只能采用第二种方法来解决。

      从以上文件中可以看出，我们在进行开发的过程中，大部分的精力都集中在数据的格式定义以及flash的展示样式的定义上，我们可以自定义flash背景颜色或图片、加入logo、阴影、透明度、边框的属性、文字属性、数字的展示格式，不同种类的图表中定义的样式会有一些区别。当然我们可以只关注定义数据格式，而不关注样式，在V3版本中，图表会以默认的方式来展现flash，并且其展示的效果还不错。这将大大减少我们的开发工作量。

      另外还可以将flash图表导出保存为图片格式或是pdf格式，可以在图表中定义超连接或js操作，以满足应用中更多的互操作要求。

 

与FushionChart free版本的比较。

free版本与V3版本相比，就逊色了很多。毕竟V3是一个商业软件。

free版本的图表只有很少一部分，而且图表的展现效果与V3版本相比较至少也差了个十 万八千里。

free版本中许多属性需要自定义设置，如柱图与折线图中数据所展现的线条需要自定义颜色，否则所有的颜色 都展现为同一种颜色；饼图可以不用自定义颜色，不过其所展现的默认颜色分布相信肯定不是你所想要的；且该版本中的饼图不具备动 画效果，在v3版本中当点击某一扇区时，扇区会以动画效果向外展示，除此之外，饼图也没有如在v3版本中所拥有的legend。

 free版本中图表里显示的文字很可能由于文字比较多而产生重叠，解决的办法是对文字的排列顺序进行设置，不过如果你的文字里有中文的话，你会发现所有中文字符都将不被显示，仅只显示英文或数字，此时的解决办法只能是依然使文字横向排列并尽量减少文字，以使文字不被重叠。

  free版本中的折线图与柱图必须给其设置最大显示数值，否则，如果所提供给图表所展示的数据全为0时，在图 表的y轴上将出现大量的“NaNM"，

另外，在free版本中不支持json格式的数据，公支持xml格式数据。

    free版本中，图表在页面上始终会展示在最上层，因此若在该页面中会有弹出层时并且希望弹出层能在图表之上显示，则需要设置flash的展示属性。