温馨提示×

温馨提示×

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

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

SSH系列:(30)FusionCharts

发布时间:2020-09-23 08:41:29 阅读:334 作者:lsieun 栏目:web开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

基本步骤:

(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

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

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

AI

开发者交流群×