fusioncharts xt suite使用

最新推荐文章于 2023-06-06 06:41:26 发布

wwwsec

最新推荐文章于 2023-06-06 06:41:26 发布

阅读量2k

点赞数 1

分类专栏： node-webkit webapp 文章标签： webapp fusioncharts

本文链接：https://blog.csdn.net/wwwsec/article/details/41675957

版权

webapp 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

node-webkit

2 篇文章 0 订阅

订阅专栏

之前经常会用到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>