温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

SSH系列:(30)FusionCharts

发布时间:2020-09-23 08:41:29 来源:网络 阅读:333 作者:lsieun 栏目:web开发


基本步骤:

(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.jsThis 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.jsThis 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、初始页面

<!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



向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI