Highcharts

時間 2019-11-12

標籤 highcharts 简体版

原文原文鏈接

官方網站：https://www.highcharts.com.cn/html

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

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

上手：工具

獲取 Highcharts學習

你能夠經過如下幾種方式獲取 Highcharts ：網站

直接引用咱們提供的 CDN 服務，無需下載，高速穩定
經過官網下載頁面獲取資源包，資源包包含全部相關文件的源代碼及壓縮版本，豐富的實例及使用說明文檔，關於下載包的詳細文件說明請參考資源包下載及使用
經過 Npm， Bower 等第三方包管理工具下載

引入 Highchartsspa

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
　　//引入highcharts.js文件
    <script src="./js/highcharts.js"></script>
</head>

建立一個簡單的圖表cdn

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

<div id="container" style="min-width:400px;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>

效果：

相關標籤/搜索

angular2+highcharts+chart.js

flask+mysql+highcharts

highcharts+ajax+json

websocket+highcharts+canvas

mongo+bootstrap+highcharts

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。