fusioncharts xt suite使用

来源：互联网发布：linux shell 脚本攻略编辑：程序博客网时间：2024/04/28 16:25

之前经常会用到fusioncharts，是flash版本的，好用是好用，但是想在移动终端显示图表不太方便。

fusioncharts xt suite可以使用javascript 绘制和flash 效果类似的图标，很不错，记录备用。

官方知道页面

http://docs.fusioncharts.com/tutorial-setup-list-of-charts.html

附一个简单使用案例，有些乱，应该还可以把datasource部分提取成单独文件，等实际使用的时候再整理。

demo1.html

<html><head><title>My First chart using FusionCharts Suite XT</title><script type="text/javascript" src="fusioncharts.js"></script><script type="text/javascript" src="themes/fusioncharts.theme.ocean.js"></script><script type="text/javascript">FusionCharts.ready(function () {    var myChart = new FusionCharts({      "type": "column2d",      "renderAt": "chartContainer",      "width": "500",      "height": "300",      "dataFormat": "xml",      "dataSource": "<chart caption='Harrys SuperMart' subcaption='Monthly revenue for last year' xaxisname='Month' yaxisname='Amount' numberprefix='$' palettecolors='#008ee4' bgalpha='0' borderalpha='20' canvasborderalpha='0' theme='fint' 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>"    });  myChart.render();});</script></head><body>  <div id="chartContainer">FusionCharts XT will load here!</div></body></html>

0 0