SSH系列：（30）FusionCharts-创新互联

基本步骤：

成都创新互联是专业的东山网站建设公司，东山接单;提供成都网站制作、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行东山网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

（1）下载JS，

（2）引入JS文件

（3）写Javascript使用JS

1、下载

FusionCharts是使用javascript 实现统计图表的js组件；其官网地址：http://www.fusioncharts.com。其早期版本FusionCharts Free 是基于flash来实现，而在2014年其脱离开flash完全使用js来实现统计图表的FusionCharts Suite XT来替代FusionCharts Free使其具有充分跨浏览器和终端的特点。

SSH系列：（30）FusionCharts

[应用环境]

FusionCharts Suite XT is a JavaScript library that runs on your desktop and mobile web browsers.

[安装FusionCharts]

Installation of FusionCharts Suite XT merely involves copying and pasting the JavaScript files from the download package into your project folder.

[Javascript文件的位置]

The JavaScript files of FusionCharts Suite library are located in js folder of your download package.

SSH系列：（30）FusionCharts

js文件	作用
fusioncharts.js	This is the core FusionCharts library, which you need to include in all your pages where a chart, gauge or map is required to be generated.
fusioncharts.charts.js	This file is required to render all charts present under FusionCharts XT.

SSH系列：（30）FusionCharts

2、引入JS文件

将fusioncharts.js、themes/fusioncharts.theme.fint.js引入到项目当中，如下图

SSH系列：（30）FusionCharts

2.1、初始页面




    
    


    FusionCharts XT will load here!

2.2、引入JS文件到页面中




    
    
    
    


    FusionCharts XT will load here!

FusionCharts.ready(function(){ var revenueChart = new FusionCharts({ "type": "column2d", "renderAt": "chartContainer", "width": "500", "height": "300", "dataFormat": "json", "dataSource": { "chart": { "caption": "Monthly revenue for last year", "subCaption": "Harry's SuperMart", "xAxisName": "Month", "yAxisName": "Revenues (In USD)", "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" } ] } }); revenueChart.render(); })

大橙子网站建设，新征程启航

SSH系列：（30）FusionCharts-创新互联

其他资讯