highcharts

時間 2019-11-12

標籤 highcharts 简体版

原文原文鏈接

1、簡介

Highcharts 是一個用純 JavaScript 編寫的一個圖表庫，可以很簡單便捷的在 Web 網站或是 Web 應用程序添加有交互性的圖表，而且免費提供給我的學習、我的網站和非商業用途使用。html

Highcharts 支持的圖表類型有直線圖、曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖、儀表圖、氣泡圖、瀑布流圖等多達 20 種圖表，其中不少圖表能夠集成在同一個圖形中造成混合圖。api

2、1 分鐘上手 Highcharts

引入 Highcharts

Highcharts 最基本的運行只須要一個 JS 文件，即 highcharts.js，以使用 CDN 文件爲例，對應的代碼是：函數

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

建立一個簡單的圖表

在繪圖前咱們須要爲 Highcharts 準備一個 DOM 容器，並指定其大小學習

<div id="container" style="width: 600px;height:400px;"></div>

而後經過 Highcharts 的初始化函數 Highcharts.chart 來建立圖表，該函數接受兩個參數，第一個參數是 DOM 容器的 Id，第二個參數是圖表配置，代碼以下：網站

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一個 Highcharts 圖表</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: '個人第一個圖表'                 // 標題
            },
            xAxis: {
                categories: ['蘋果', '香蕉', '橙子']   // x 軸分類
            },
            yAxis: {
                title: {
                    text: '吃水果個數'                // y 軸標題
                }
            },
            series: [{                              // 數據列
                name: '小明',                        // 數據列名
                data: [1, 0, 4]                     // 數據
            }, {
                name: '小紅',
                data: [5, 7, 3]
            }]
        };
        // 圖表初始化函數
        var chart = Highcharts.chart('container', options);
    </script>
</body>
</html>