Highcharts 数据可视化

发表于 | 更新于 | 分类于 ， ， | 评论数： | 阅读次数：
本文字数： 8.9k | 阅读时长 ≈ 8 分钟

Highcharts

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表

获取Highcharts
  • CDN获取
    • https://code.highcharts.com.cn/index.html
  • 官网获取资源包
    • https://www.highcharts.com.cn/download
  • npm、bower等第三方包管理工具下载
    • npm:
      • https://www.highcharts.com.cn/docs/install-from-npm
    • bower:
      • https://www.highcharts.com.cn/docs/install-from-bower
引入Highcharts
1
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
创建一个简单的图表
  • 引入CDN的JS文件
  • 初始化函数 Highcharts.chart 来创建图表
    • 该函数接受两个参数，第一个参数是 DOM 容器的 Id，第二个参数是图表配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Highcharts_Demo</title>
</head>
<body>
    <!-- 图表容器 DOM -->
    <div id="container" style="width: 600px;height:400px;"></div>
    <!-- 引入 highcharts.js -->
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script>
        // 图表配置
        var options = {
            chart: {
                type: 'bar'                          //指定图表的类型，默认是折线图（line）
            },
            title: {
                text: 'Highcharts_Demo'                 // 标题
            },
            xAxis: {
                categories: ['苹果', '香蕉', '橙子']   // x 轴分类
            },
            yAxis: {
                title: {
                    text: '吃水果个数'                // y 轴标题
                }
            },
            series: [{                              // 数据列
                name: 'Akashi',                        // 数据列名
                data: [1, 0, 4]                     // 数据
            }, {
                name: 'Asuka',
                data: [5, 7, 3]
            }],
            credits:{
                enabled:false                       // 去除右下角水印
            }
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>
</body>
</html>
去除水印

去除右下角水印链接，只需要在highcharts.js中修改

1
2
3
credits:{
    enabled:false
}；

效果