FusionCharts绘图插件(二)——绑定数据源

来源：互联网发布：咏春拳可以自学吗知乎编辑：程序博客网时间：2024/05/16 15:37

关于新版本的FusionCharts，在上一篇文章中已经提到了一些，那就是新版本功能更加强大，并且支持JSON格式的数据源绑定，而且摒弃了使用flash的视频文件作为图表样板，而是采用了js和html5，使得FusionCharts更加美观、轻量和简单使用。下面我们就接着上一篇文章来看看新版本的FusionCharts如何使用。
这次我们就使用简单的柱状图进行演示，如何用不同的方法进行数据的绑定，说起来其实有4种绑定数据源的方法。我们先来看看要实现的柱状图。
年度统计表

1.XML

由于FusionCharts最早的时候是采用的xml作为数据源，所以我们先用xml作为模板介绍一下。

xml数据源

这里需要说明一下，由于要实现上图所需要的属性特别多，所以才会出现下面xml中chart标签包含这么多，这也是和JSON格式的一个区别，这个一会再说。

<chart caption='SuperMart' subcaption='Monthly revenue for last year' xaxisname='Month' yaxisname='Amount' numberprefix='$' palettecolors='#008ee4' bgalpha='0' borderalpha='20' canvasborderalpha='0' useplotgradientcolor='0' plotborderalpha='10' placevaluesinside='1' rotatevalues='1' valuefontcolor='#ffffff' captionpadding='20' showaxislines='1' axislinealpha='25' divlinealpha='10'>    <set label='Jan' value='420000' />    <set label='Feb' value='810000' />    <set label='Mar' value='720000' />    <set label='Apr' value='550000' />    <set label='May' value='910000' />    <set label='Jun' value='510000' />    <set label='Jul' value='680000' />    <set label='Aug' value='620000' />    <set label='Sep' value='610000' />    <set label='Oct' value='490000' />    <set label='Nov' value='900000' />    <set label='Dec' value='730000' /></chart>

1.1 绑定属性中的dataSource

<html>    <head>        <meta charset="UTF-8">        <title>My First chart using FusionCharts Suite XT</title>        <script type="text/javascript" src="js/fusioncharts.js"></script>        <script type="text/javascript" src="js/fusioncharts.theme.fint.js"></script>        <script type="text/javascript">            FusionCharts.ready(function() {                         var myChart = new FusionCharts({                    "type": "column2d",  //图表类型                    "renderAt": "chartContainer",  //目标DOM节点                    "width": "500",                    "height": "300",                    "dataFormat": "xml",  //指定数据源格式                    "dataSource": "注意：这里写上面的数据源"  //绑定数据内容                });                myChart.render(); //绘制图表            });        </script>    </head>    <body>        <div id="chartContainer">FusionCharts XT will load here!</div>    </body></html>

1.2 setXMLData

<script type="text/javascript">    FusionCharts.ready(function() {        var dataxml = "注意：这里写上面的数据源";        var myChart = new FusionCharts({            "type": "column2d",            "renderAt": "chartContainer",            "width": "500",            "height": "300",            "dataFormat": "xml",        });        myChart.setXMLData(dataxml);        myChart.render();    });</script>

1.2 setXMLUrl

<script type="text/javascript">    FusionCharts.ready(function() {        var myChart = new FusionCharts({            "type": "column2d",            "renderAt": "chartContainer",            "width": "500",            "height": "300",            "dataFormat": "xml",        });        myChart.setXMLUrl("xml/Data.xml");//这里的数据源是xml文件，绑定路径就可以了。        myChart.render();    });</script>

2. JSON

关于JSON格式的优点就不再多说了，这也是为什么FusionCharts也支持JSON数据源的原因。

JSON数据源

{    "chart": {        "caption": "Monthly revenue for last year",        "subCaption": "Harry's SuperMart",        "xAxisName": "Month",        "yAxisName": "Revenues (In USD)",        "numberPrefix": "$",        "theme": "fint"    },    "data": [        {            "label": "Jan",            "value": "420000"        },        {            "label": "Feb",            "value": "810000"        },        {            "label": "Mar",            "value": "720000"        },        {            "label": "Apr",            "value": "550000"        },        {            "label": "May",            "value": "910000"        },        {            "label": "Jun",            "value": "510000"        },        {            "label": "Jul",            "value": "680000"        },        {            "label": "Aug",            "value": "620000"        },        {            "label": "Sep",            "value": "610000"        },        {            "label": "Oct",            "value": "490000"        },        {            "label": "Nov",            "value": "900000"        },        {            "label": "Dec",            "value": "730000"        }    ]}

2.1 绑定属性中的dataSource

<script type="text/javascript">    FusionCharts.ready(function() {        var MyChart = new FusionCharts({            "type": "column2d", //显示图表类型            "renderAt": "chartContainer", //显示区域ID            "width": "500",            "height": "300",            "dataFormat": "json", //数据源格式            "dataSource": {                "chart": { //图表属性                    "caption": "Monthly revenue for last year",                    "subCaption": "Harry's SuperMart",                    "xAxisName": "Month", //X轴坐标名称                    "yAxisName": "Revenues (In USD)", //Y轴坐标名称                    "theme": "fint", //这个就是图表的显示主题，所以不用自定义那么多的属性了。                                      },                "data": [{                    "label": "Jan",                    "value": "420000"                }, {                    "label": "Feb",                    "value": "810000"                }, {                    "label": "Mar",                    "value": "720000"                }, {                    "label": "Apr",                    "value": "550000"                }, {                    "label": "May",                    "value": "910000"                }, {                    "label": "Jun",                    "value": "510000"                }, {                    "label": "Jul",                    "value": "680000"                }]            }                  });        MyChart.render();    })</script>

2.1 setJSONData和setJSONUrl
这里的两种方法和上面xml的使用方法一样，就不再介绍了。

总结：需要注意的是中文乱码的问题，这个要在页面中事先声明好采用适当的编码格式，如UTF-8或者GB2312，不过有的时候和浏览器有关，我用火狐就出现乱码，用谷歌就显示正常，这个如果遇到了就找办法解决一下。推荐使用JSON的数据格式，不然为达到同样的显示效果，xml格式需要加很多属性。。。。就如同上面的xml数据源一样。

1 0