SSH系列：（30）FusionCharts

基本步驟：

龍鳳ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

（1）下載JS，

（2）引入JS文件

（3）寫Javascript使用JS

1、下載

FusionCharts是使用javascript實現(xiàn)統(tǒng)計圖表的js組件；其官網(wǎng)地址：http://www.fusioncharts.com。其早期版本FusionCharts Free是基于flash來實現(xiàn)，而在2014年其脫離開flash完全使用js來實現(xiàn)統(tǒng)計圖表的FusionCharts Suite XT來替代FusionCharts Free使其具有充分跨瀏覽器和終端的特點。

SSH系列：（30）FusionCharts

[應(yīng)用環(huán)境]

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引入到項目當(dāng)中，如下圖

SSH系列：（30）FusionCharts

2.1、初始頁面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
</head>
<body>
    <div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>

2.2、引入JS文件到頁面中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="js/fusioncharts/fusioncharts.js"></script>
    <script type="text/javascript" src="js/fusioncharts/themes/fusioncharts.theme.fint.js"></script>
    <title></title>
</head>
<body>
    <div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>

添加的部分是

    <script type="text/javascript" src="js/fusioncharts/fusioncharts.js"></script>
    <script type="text/javascript" src="js/fusioncharts/themes/fusioncharts.theme.fint.js"></script>

2.3、使用FusionCharts

添加Javascript代碼，如下：

<script type="text/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();
    })

</script>

完整的HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="js/fusioncharts/fusioncharts.js"></script>
    <!--<script type="text/javascript" src="js/fusioncharts/fusioncharts.charts.js"></script>-->
    <script type="text/javascript" src="js/fusioncharts/themes/fusioncharts.theme.fint.js"></script>
    <script type="text/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();
        })

    </script>
    <title></title>
</head>
<body>
    <div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>

效果圖

SSH系列：（30）FusionCharts

當(dāng)前標(biāo)題：SSH系列：（30）FusionCharts
文章轉(zhuǎn)載：http://muchs.cn/article40/ghogeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、Google、標(biāo)簽優(yōu)化、微信小程序、響應(yīng)式網(wǎng)站、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容