初识新版FusionCharts(3.2)系列flash图表控件打赏

FusionCharts Team 是家印度公司,大家可以去他们官网http://www.fusioncharts.com/

他们出品了很多工具,虽然统称为FusionCharts,但是这套flash图表控件包含以下的内容:
1、flash图表控件(FusionCharts)
2、flash地图控件(FusionMaps)
3、flash压力表控件(FusionWidgets)
4、flash电源图(PowerCharts)
另外他们有free版本的控件,可以免费使用,Evaluation版本是增强版本,不但图表漂亮了很多,功能也提升了不少,只是图表上有他们公司的标志而已,也因此,强大的国人发了很多破解版。

最近接触FusionChart图表控件,用的还是旧版,有空看了下新版3.2,发现从3.2开始已经不再是只支持xml格式数据了,同时提供了xml和json格式的支持,图表展示方面也提供了javascript的展示,这点让我之前想使用类似Extjs、dojo等js包简单替代FusionCharts的念头彻底抛开了。

使用Javascript输出的方式类型基本与flash方式的类型名相匹配,如:使用Column 3D的效果,flash为Column3D.swf,Javascript则为Column 3D。

数据格式方面,如图所示示例图表:
fusioncharts
传统xml格式数据源如下:

<chart caption="Country Comparison" showLabels="1" showvalues="0" decimals="0" numberPrefix="$">
<categories><category label="Austria"></category><category label="Brazil"></category><category label="France"></category><category label="Germany"></category><category label="USA"></category></categories>
<dataset seriesName="1996" color="AFD8F8" showValues="0">
<set value="25601.34"></set>
<set value="20148.82"></set>
<set value="17372.76"></set>
<set value="35407.15"></set>
<set value="38105.68"></set>
</dataset>
<dataset seriesName="1997" color="F6BD0F" showValues="0">
<set value="57401.85"></set>
<set value="41941.19"></set>
<set value="45263.37"></set>
<set value="117320.16"></set>
<set value="114845.27"></set>
</dataset>
<dataset seriesName="1998" color="8BBA00" showValues="0">
<set value="45000.65"></set>
<set value="44835.76"></set>
<set value="18722.18"></set>
<set value="77557.31"></set>
<set value="92633.68"></set>
</dataset>
</chart>

JSON格式数据源如下:

{
  "chart": {
    "caption": "Country Comparison",
    "showlabels": "1",
    "showvalues": "0",
    "decimals": "0",
    "numberprefix": "$"
  },
  "categories": [
    {
      "category": [
        {
          "label": "Austria"
        },
        {
          "label": "Brazil"
        },
        {
          "label": "France"
        },
        {
          "label": "Germany"
        },
        {
          "label": "USA"
        }
      ]
    }
  ],
  "dataset": [
    {
      "seriesname": "1996",
      "color": "AFD8F8",
      "showvalues": "0",
      "data": [
        {
          "value": "25601.34"
        },
        {
          "value": "20148.82"
        },
        {
          "value": "17372.76"
        },
        {
          "value": "35407.15"
        },
        {
          "value": "38105.68"
        }
      ]
    },
    {
      "seriesname": "1997",
      "color": "F6BD0F",
      "showvalues": "0",
      "data": [
        {
          "value": "57401.85"
        },
        {
          "value": "41941.19"
        },
        {
          "value": "45263.37"
        },
        {
          "value": "117320.16"
        },
        {
          "value": "114845.27"
        }
      ]
    },
    {
      "seriesname": "1998",
      "color": "8BBA00",
      "showvalues": "0",
      "data": [
        {
          "value": "45000.65"
        },
        {
          "value": "44835.76"
        },
        {
          "value": "18722.18"
        },
        {
          "value": "77557.31"
        },
        {
          "value": "92633.68"
        }
      ]
    }
  ]
}

对比看来,JSON格式的数据似乎更简单明确和便于构造。

至于使用,方式一样,同样简单的几行Javascript即可展示数据,如下:

if (GALLERY_RENDERER && GALLERY_RENDERER.search(/javascript|flash/i)==0)  FusionCharts.setCurrentRenderer(GALLERY_RENDERER); 
var chart = new FusionCharts("../../Charts/MSColumn3D.swf", "ChartId", "560", "400", "0", "0");
chart.setXMLData( dataString );
chart.render("chartdiv");

这里有四行,较之前多了一行if语句,用来判断是使用Javascript还是flash,实际应用中改行依然可以忽略。
下面提出上图中示例的全部HTML源代码,有更多需要可以到官网下载包含api文档的发布包,这里不再一一介绍。

< ?xml version="1.0" encoding="iso-8859-1"?>< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Single Series Column 2D Chart</title>
        <link href="../assets/ui/css/style.css" rel="stylesheet" type="text/css" />
        <link href="../assets/prettify/prettify.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="../../Charts/jquery.min.js"></script>
        <script type="text/javascript" src="../../Charts/FusionCharts.js"></script>
        <script type="text/javascript" src="../assets/prettify/prettify.js"></script>
        <script type="text/javascript" src="../assets/ui/js/json2.js"></script>
         <script type="text/javascript" src="../assets/ui/js/lib.js" ></script>
<!--[if IE 6]>
        <script type="text/javascript" src="../assets/ui/js/DD_belatedPNG_0.0.8a-min.js"></script>
        <script>
          /* select the element name, css selector, background etc */
          DD_belatedPNG.fix('img');

          /* string argument can be any CSS selector */
        </script>
		  <p>&nbsp;</p>
		  <p align="center"></p>
        < ![endif]-->
    </head>
    <body>
        
		<h3 class="chart-title" >Single Series Column 2D Chart</h3>
        <p>&nbsp;</p>
        <script type="text/javascript" src="../Data/String/js/Col2D1.js" ></script>
        
        <div id="chartdiv" align="center">Chart will load here</div>
        <script type="text/javascript">
			if (GALLERY_RENDERER && GALLERY_RENDERER.search(/javascript|flash/i)==0)  FusionCharts.setCurrentRenderer(GALLERY_RENDERER);  
            var chart = new FusionCharts("../../Charts/Column2D.swf", "ChartId_flash", "560", "400", "0", "1" );
            chart.setXMLData( dataString );
            chart.render("chartdiv");
        </script>
		
		<p>&nbsp;</p>
   	    <p align="center">Simple Column 2D chart showing top 5 sales person of the year</p>
        <p>&nbsp;</p>
        <div class="qua-button-holder"></div>
        <div class="show-code-block"></div>
		
     </body>
 </html>

值得一提的是,3.2版的FusionCharts实现Drill Down不再是单一的Link来实现多个报表的跳转了,新增了LinkedCharts概念。
可以使用setXMLUrl来实现Drill Down。如下:

var myChart = new FusionCharts( "FusionCharts/Column2D.swf", "myChartId", "320", "250", "0", "1" );
myChart.setXMLUrl("summary-data.xml");
myChart.render("chartContainer");

linkeddata的格式也不太一样,如:
xml格式:

<chart caption="Yearly sales" xAxisName="Year" yAxisName="Sales">
  <set label="2004" value="37800" link="newchart-xml-2004-quarterly"></set>
  <set label="2005" value="21900" link="newchart-xml-2005-quarterly"></set>
  <set label="2006" value="32900" link="newchart-xml-2006-quarterly"></set>
  <set label="2007" value="39800" link="newchart-xml-2007-quarterly"></set>
  
  <linkeddata id="2004-quarterly">
    <chart caption="Quarterly Sales Summary" subcaption="For the year 2004"
    xAxisName="Quarter" yAxisName="Sales" >
       <set label="Q1" value="11700"></set>
       <set label="Q2" value="8600"></set>
       <set label="Q3" value="6900"></set>
       <set label="Q4" value="10600"></set>
    </chart>
  </linkeddata>
  
  <linkeddata id="2005-quarterly">
    <chart caption="Quarterly Sales Summary" subcaption="For the year 2005"
      xAxisName="Quarter" yAxisName="Sales">
       <set label="Q1" value="5500"></set>
       <set label="Q2" value="7100"></set>
       <set label="Q3" value="3900"></set>
       <set label="Q4" value="5400"></set>
    </chart>
  </linkeddata>

  <linkeddata id="2006-quarterly">
    <chart caption="Quarterly Sales Summary" subcaption="For the year 2006"
      xAxisName="Quarter" yAxisName="Sales">
       <set label="Q1" value="6700"></set>
       <set label="Q2" value="9200"></set>
       <set label="Q3" value="10800"></set>
       <set label="Q4" value="6200"></set>
    </chart>
  </linkeddata>

  <linkeddata id="2007-quarterly">
    <chart caption="Quarterly Sales Summary" subcaption="For the year 2007"
      xAxisName="Quarter" yAxisName="Sales">
      <set label="Q1" value="8900"></set>
      <set label="Q2" value="6600"></set>
      <set label="Q3" value="11200"></set>
      <set label="Q4" value="13100"></set>
     </chart>
  </linkeddata>

</chart>

JSON格式:

{
  "chart":{
    "caption":"Yearly Sales", "xaxisname":"Year", "yaxisname":"Sales" },
  "data":[{ 
      "label":"2004", "value":"37800", "link":"newchart-json-2004-quarterly"
    },
    {
      "label":"2005","value":"21900", "link":"newchart-json-2005-quarterly"
    },
    {
      "label":"2006", "value":"32900", "link":"newchart-json-2006-quarterly"
    },
    {
      "label":"2007", "value":"39800", "link":"newchart-json-2007-quarterly"
    }
  ],
  "linkeddata":[{
      "id":"2004-quarterly",
      "linkedchart":{
        "chart":{
          "caption":"Quarterly Sales Summary",
          "subcaption":"For the year 2004",
          "xaxisname":"Quarter",
          "yaxisname":"Sales"
        },
        "data":[
          { "label":"Q1", "value":"11700" },
          { "label":"Q2", "value":"8600" },
          { "label":"Q3", "value":"6900" },
          { "label":"Q4", "value":"10600" }
        ]
      }
    },
    {
      "id":"2005-quarterly",
      "linkedchart":{
        "chart":{
          "caption":"Quarterly Sales Summary",
          "subcaption":"For the year 2005",
          "xaxisname":"Quarter",
          "yaxisname":"Sales"
        },
        "data":[
           { "label":"Q1", "value":"5500" },
           { "label":"Q2", "value":"7100" },
           { "label":"Q3", "value":"3900" },
           { "label":"Q4", "value":"5400" }
        ]
      }
    },
    {
      "id":"2006-quarterly",
      "linkedchart":{
        "chart":{
          "caption":"Quarterly Sales Summary",
          "subcaption":"For the year 2006",
          "xaxisname":"Quarter",
          "yaxisname":"Sales"
        },
        "data":[
           { "label":"Q1", "value":"6700" },
           { "label":"Q2", "value":"9200" },
           { "label":"Q3", "value":"10800" },
           { "label":"Q4", "value":"6200" }
        ]
      }
    },
    {
      "id":"2007-quarterly",
      "linkedchart":{
        "chart":{
          "caption":"Quarterly Sales Summary",
          "subcaption":"For the year 2007",
          "xaxisname":"Quarter",
          "yaxisname":"Sales"
        },
        "data":[
          { "label":"Q1", "value":"8900" },
          { "label":"Q2", "value":"6600" },
          { "label":"Q3", "value":"11200" },
          { "label":"Q4", "value":"13100" }
        ]
      }
    }
  ]
}

具体示例这里不再举例,小子也是刚刚接触,待详细了解后有必要的话再拿出来分享吧。大家有兴趣可以自己去看看官方文档。



初识新版FusionCharts(3.2)系列flash图表控件
文章《初识新版FusionCharts(3.2)系列flash图表控件》二维码
  • 微信打赏
  • 支付宝打赏

无觅相关文章插件,快速提升流量