SSH系列：（30）FusionCharts

基本步骤：

龙凤ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

（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 filesfrom 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 chartspresent 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!

添加的部分是

2.3、使用FusionCharts

添加Javascript代码，如下：


    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();
    })

完整的HTML




    
    
    
    
    
        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();
        })

    
    


    FusionCharts XT will load here!

效果图

SSH系列：（30）FusionCharts

当前文章：SSH系列：（30）FusionCharts
当前路径：http://scyanting.com/article/ghogeo.html

SSH系列：（30）FusionCharts

其他资讯