FusionCharts图表展示示例

FusionCharts 的图表展示效果挺酷的，交互也顺手，用起来还蛮省心的。你只要在index.html里引好脚本，分分钟就能画出个好看的柱状图或者饼图，前端小伙伴肯定爱不释手。

FusionCharts 的安装方式也简单，直接在页面里引入FusionCharts.js主库就行，想要支持更多类型的图，就再加几个扩展包。基本上，不太费劲。

要建一个图表实例也不复杂，设置下type、width、height、dataSource这些参数，图表立马渲染。像下面这种代码就能跑起来：

const chart = new FusionCharts({
  type: 'column2d',
  renderAt: 'chart-container',
  width: '100%',
  height: '400',
  dataFormat: 'json',
  dataSource: {...}
});
chart.render();

数据来源支持也挺多样的，JSON、XML 都行，甚至可以直接在 JS 里写死数据，或者从后端异步加载。对于动态数据展示实用。

图表种类丰富，像Column2D、Pie3D都挺常用的，想要高大上一点的地图或仪表盘，它也支持。

还有个JSClass目录，里面全是跟图表交互相关的脚本，比如怎么监听点击事件、怎么动态换数据，功能挺细的，适合想玩点花活儿的你。

如果你想把图表保存成图片，ImageSaving模块可以帮你一键搞定。适合那种要做报表、要离线看的场景。

Code和Contents目录里也有不少示例代码，跟着练几遍就能上手了。不太懂的地方，对着这些文件摸索一下也容易理解。

要是你有原始数据但格式不对，Tools目录下还有一些小工具帮你转换格式，省了不少事。

记得看下License (v3 Evaluation).html，这是评估版的授权文件，用于测试没问题，但线上项目还是建议用正式授权。

自定义能力也蛮强的，图表颜色、字体、背景什么的都能改，还能绑定事件，比如点柱子跳转页面，用来做仪表盘再合适不过。

如果你正好在做数据展示相关的前端项目，建议你翻一翻这个 FusionCharts 实例包，内容比较全，上手也容易。想看看对比产品？可以去看看 Highcharts 或 ECharts。