Highcharts 快速指南

Highcharts - 概述

Highcharts是一個基於純JavaScript的圖表庫，旨在透過新增互動式圖表功能來增強Web應用程式。它支援各種圖表。圖表使用SVG在Chrome、Firefox、Safari、Internet Explorer（IE）等標準瀏覽器中繪製。在舊版IE 6中，使用VML繪製圖形。

Highcharts 庫的功能

現在讓我們討論Highcharts庫的一些重要功能。

相容性 - 在所有主要的瀏覽器和移動平臺（如Android和iOS）上都能無縫執行。
多點觸控支援 - 支援基於觸控式螢幕的平臺（如Android和iOS）的多點觸控。非常適合iPhone/iPad和基於Android的智慧手機/平板電腦。
免費使用 - 開源，可免費用於非商業用途。
輕量級 - highcharts.js核心庫大小約為35KB，是一個極其輕量級的庫。
簡單的配置 - 使用JSON定義圖表的各種配置，非常易於學習和使用。
動態的 - 允許在圖表生成後修改圖表。
多個軸 - 不僅限於x軸和y軸。支援圖表上的多個軸。
可配置的工具提示 - 當用戶將滑鼠懸停在圖表上的任何點時，都會出現工具提示。Highcharts提供內建格式化程式或回撥格式化程式以程式設計方式控制工具提示。
日期時間支援 - 特殊處理日期時間。提供許多內建控制元件來控制按日期分類。
匯出 - 透過啟用匯出功能，可以將圖表匯出為PDF/PNG/JPG/SVG格式。
列印 - 使用網頁列印圖表。
可縮放性 - 支援縮放圖表以更精確地檢視資料。
外部資料 - 支援從伺服器動態載入資料。使用回撥函式控制資料。
文字旋轉 - 支援向任何方向旋轉標籤。

支援的圖表型別

Highcharts庫提供以下型別的圖表：

序號	圖表型別和描述
1	折線圖用於繪製基於線/樣條線的圖表。
2	面積圖用於繪製基於區域的圖表。
3	餅圖用於繪製餅圖。
4	散點圖用於繪製散點圖。
5	氣泡圖用於繪製基於氣泡的圖表。
6	動態圖表用於繪製動態圖表，使用者可以修改圖表。
7	組合圖表用於繪製各種圖表的組合。
8	3D 圖表用於繪製3D圖表。
9	指標儀表盤用於繪製速度計型別的圖表。
10	熱力圖用於繪製熱力圖。
11	樹狀圖用於繪製樹狀圖。

在接下來的章節中，我們將詳細討論每種上述圖表型別，並提供示例。

許可證

Highcharts是開源的，可免費用於非商業用途。要在商業專案中使用Highcharts，請訪問以下連結：許可證和定價

Highcharts - 環境設定

本章將討論如何在Web應用程式開發中設定Highcharts庫。

Highcharts依賴於jQuery。首先，我們將安裝jQuery庫，然後安裝Highcharts庫。

安裝jQuery

有兩種方法可以使用jQuery。

下載 - 從jQuery.com本地下載並使用它。
CDN訪問 - 您還可以訪問CDN。CDN將為您提供全球各地區域資料中心的訪問許可權；在本例中，Google託管。這意味著使用CDN將託管檔案的責任從您自己的伺服器轉移到一系列外部伺服器。這也提供了一個優勢，即如果您的網頁訪問者已經從同一個CDN下載了jQuery的副本，則無需重新下載。

使用下載的jQuery

使用以下指令碼在HTML頁面中包含jQuery JavaScript檔案：

<head>
   <script src = "/jquery/jquery.min.js"></script>
</head>

使用CDN

在本教程中，我們使用的是jQuery庫的CDN版本。

使用以下指令碼在HTML頁面中包含jQuery JavaScript檔案：

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
   </script>
</head>

安裝Highcharts

以下是用Highcharts的兩種方法。

下載 - 從highcharts.com本地下載並使用它。
CDN訪問 - 您還可以訪問CDN。CDN將為您提供全球各地區域資料中心的訪問許可權；在本例中，Highcharts主機 - Code.Highcharts.Com。

使用下載的Highcharts

使用以下指令碼在HTML頁面中包含Highcharts JavaScript檔案：

<head>
   <script src = "/highcharts/highcharts.js"></script>
</head>

使用CDN

在本教程中，我們使用的是Highcharts庫的CDN版本。

使用以下指令碼在HTML頁面中包含Highcharts JavaScript檔案：

<head>
   <script src = "https://code.highcharts.com/highcharts.js"></script>
</head>

Highcharts - 配置語法

本章將展示使用Highcharts API繪製圖表所需的配置。

步驟1：建立HTML頁面

建立一個包含jQuery和Highcharts javascript庫的HTML頁面。

HighchartsTestHarness.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      
      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>
      
   </body>
</html>

這裡的container div用於包含使用Highcharts庫繪製的圖表。

步驟2：建立配置

Highcharts庫使用非常簡單的JSON語法配置。

$('#container').highcharts(json);

這裡的JSON表示Highcharts庫用來在container div中使用highcharts()方法繪製圖表的JSON資料和配置。現在，我們將配置各種引數以建立所需的JSON字串。

標題

配置圖表的標題。

var title = {
   text: 'Monthly Average Temperature'   
};

副標題

配置圖表的副標題。

var subtitle = {
   text: 'Source: WorldClimate.com'
};

X軸

配置要在X軸上顯示的刻度。

var xAxis = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
      ,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

Y軸

配置要在Y軸上顯示的標題和繪圖線。

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};

工具提示

配置工具提示。放置要在值（y軸）後新增的字尾。

var tooltip = {
   valueSuffix: '\xB0C'
}

圖例

配置圖例，使其與其他屬性一起顯示在圖表的右側。

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

系列

配置要在圖表上顯示的資料。Series是一個數組，該陣列的每個元素代表圖表上的一條線。

var series = [
   {
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, 
   {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, 
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, 
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

步驟3：構建JSON資料

組合所有配置。

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

步驟4：繪製圖表

$('#container').highcharts(json);

示例

考慮以下示例以進一步瞭解配置語法：

highcharts_configuration.htm

即時演示

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Monthly Average Temperature'   
            };
            var subtitle = {
               text: 'Source: WorldClimate.com'
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            };
            var yAxis = {
               title: {
                  text: 'Temperature (\xB0C)'
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };   

            var tooltip = {
               valueSuffix: '\xB0C'
            }
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0
            };
            var series =  [{
                  name: 'Tokyo',
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                     26.5, 23.3, 18.3, 13.9, 9.6]
               }, 
               {
                  name: 'New York',
                  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
                     24.1, 20.1, 14.1, 8.6, 2.5]
               }, 
               {
                  name: 'Berlin',
                  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
                     17.9, 14.3, 9.0, 3.9, 1.0]
               }, 
               {
                  name: 'London',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
                     16.6, 14.2, 10.3, 6.6, 4.8]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;

            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

結果

驗證結果。

Highcharts - 折線圖

折線圖用於繪製基於線/樣條線的圖表。在本節中，我們將討論不同型別的線和樣條線圖表。

序號	圖表型別和描述
1	基本折線基本折線圖。
2	帶資料標籤帶有資料標籤的圖表。
3	Ajax載入資料，可點選點從伺服器檢索資料後繪製的圖表。
4	時間序列，可縮放帶有時間序列的圖表。
5	帶反轉軸的樣條線具有反轉軸的樣條線圖表。
6	帶符號的樣條線使用符號表示熱/雨的樣條線圖表。
7	帶繪圖帶的樣條線帶有繪圖帶的樣條線圖表。
8	具有不規則間隔的時間資料一大組基於時間的圖表。
9	對數軸描繪對數軸的圖表。

Highcharts - 面積圖

面積圖用於繪製基於區域的圖表。在本節中，我們將討論不同型別的基於區域的圖表。

序號	圖表型別和描述
1	基本區域基本區域圖。
2	帶負值的區域具有負值的區域圖。
3	堆疊區域圖表具有彼此堆疊的區域。
4	百分比區域以百分比形式顯示資料的圖表。
5	帶缺失點的區域資料中缺少點的圖表。
6	反轉軸使用反轉軸的區域。
7	區域樣條線使用樣條線的區域圖。
8	區域範圍使用範圍的區域圖。
9	區域範圍和折線使用範圍和線的區域圖。

Highcharts - 條形圖

條形圖用於繪製基於區域的圖表。在本節中，我們將討論不同型別的基於條形的圖表。

序號	圖表型別和描述
1	基本條形基本條形圖。
2	堆疊條形條形圖的條形彼此堆疊。
3	負堆疊區域帶負堆疊的條形圖。

Highcharts - 柱狀圖

柱狀圖用於繪製基於列的圖表。在本節中，我們將討論不同型別的基於列的圖表。

序號	圖表型別和描述
1	基本柱狀基本柱狀圖。
2	帶負值的柱狀具有負值的柱狀圖。
3	堆疊柱狀圖表具有彼此堆疊的柱狀。
4	堆疊和分組柱狀圖表以堆疊和分組的形式顯示柱狀。
5	帶堆疊百分比的柱狀帶有堆疊百分比的圖表。
6	帶旋轉標籤的柱狀柱狀圖在列中旋轉標籤。
7	帶鑽取的柱狀具有鑽取功能的柱狀圖。
8	帶固定位置的柱狀具有固定位置的柱狀圖。
9	在HTML表格中定義的資料使用在HTML表格中定義的資料的柱狀圖。
10	柱狀範圍使用範圍的柱狀圖。

Highcharts - 餅圖

餅圖用於繪製基於餅的圖表。在本節中，我們將討論不同型別的基於餅的圖表。

序號	圖表型別和描述
1	基本餅圖基本餅圖。
2	帶圖例的餅圖帶有圖例的餅圖。
3	環形圖環形圖。
4	半圓環形圖半圓環形圖。
5	帶鑽取的餅圖具有鑽取功能的餅圖。
6	帶漸變的餅圖帶有漸變填充的餅圖。
7	帶單色的餅圖帶有單色填充的餅圖。

Highcharts - 散點圖

散點圖用於繪製基於散點的圖表。在本節中，我們將討論不同型別的基於散點的圖表。

序號	圖表型別和描述
1	散點圖散點圖。

Highcharts - 氣泡圖

氣泡圖用於繪製基於氣泡的圖表。在本節中，我們將討論不同型別的基於氣泡的圖表。

序號	圖表型別和描述
1	氣泡圖氣泡圖。
2	3D氣泡圖 3D氣泡圖。

Highcharts - 動態圖表

動態圖表用於繪製基於資料的圖表，其中資料可以在圖表渲染後更改。在本節中，我們將討論不同型別的動態圖表。

序號	圖表型別和描述
1	每秒更新一次的樣條線每秒更新一次的樣條線圖表。
2	單擊新增點帶點新增功能的圖表。

Highcharts - 組合圖表

組合圖表用於繪製混合圖表；例如，條形圖和餅圖組合。在本節中，我們將討論不同型別的組合圖表。

序號	圖表型別和描述
1	柱狀圖、折線圖和餅圖包含柱狀圖、折線圖和餅圖的圖表。
2	雙軸、折線圖和柱狀圖帶有雙軸、折線圖和柱狀圖的圖表。
3	多軸具有多個軸的圖表。
4	散點圖及迴歸線帶有迴歸線的散點圖。

Highcharts - 3D 圖表

3D圖表用於繪製三維圖表。在本節中，我們將討論不同型別的3D圖表。

序號	圖表型別和描述
1	3D柱狀圖 3D柱狀圖。
2	帶有空值的3D柱狀圖帶有空值和0值的3D柱狀圖。
3	堆疊式3D柱狀圖帶有堆疊和分組的3D柱狀圖。
4	3D餅圖 3D餅圖。
5	3D環形圖 3D環形圖。

Highcharts - 指標儀表盤

角度儀表圖表用於繪製儀表/刻度盤型別的圖表。在本節中，我們將討論不同型別的角度儀表圖表。

序號	圖表型別和描述
1	角度儀表角度儀表圖表。
2	實心儀表實心儀表圖表。
3	時鐘時鐘。
4	帶雙軸的儀表帶有雙軸的儀表圖表。
5	VU表 VU表圖表。

Highcharts - 熱力圖

熱力圖圖表用於繪製熱力圖型別圖表。在本節中，我們將討論不同型別的熱力圖。

序號	圖表型別和描述
1	熱力圖熱力圖。
2	大型熱力圖大型熱力圖。

Highcharts - 樹狀圖

樹狀圖圖表用於繪製樹狀圖型別圖表。在本節中，我們將討論不同型別的樹狀圖。

序號	圖表型別和描述
1	樹狀圖帶有顏色軸的樹狀圖。
2	帶層級的樹狀圖帶層級的樹狀圖。
3	大型樹狀圖大型樹狀圖。

列印頁面

序號	圖表型別和描述
1	基本折線基本折線圖。
2	帶資料標籤帶有資料標籤的圖表。
3	Ajax載入資料，可點選點從伺服器檢索資料後繪製的圖表。
4	時間序列，可縮放帶有時間序列的圖表。
5	帶反轉軸的樣條線具有反轉軸的樣條線圖表。
6	帶符號的樣條線使用符號表示熱/雨的樣條線圖表。
7	帶繪圖帶的樣條線帶有繪圖帶的樣條線圖表。
8	具有不規則間隔的時間資料一大組基於時間的圖表。
9	對數軸描繪對數軸的圖表。

序號	圖表型別和描述
1	基本區域基本區域圖。
2	帶負值的區域具有負值的區域圖。
3	堆疊區域圖表具有彼此堆疊的區域。
4	百分比區域以百分比形式顯示資料的圖表。
5	帶缺失點的區域資料中缺少點的圖表。
6	反轉軸使用反轉軸的區域。
7	區域樣條線使用樣條線的區域圖。
8	區域範圍使用範圍的區域圖。
9	區域範圍和折線使用範圍和線的區域圖。

序號	圖表型別和描述
1	基本條形基本條形圖。
2	堆疊條形條形圖的條形彼此堆疊。
3	負堆疊區域帶負堆疊的條形圖。

序號	圖表型別和描述
1	基本柱狀基本柱狀圖。
2	帶負值的柱狀具有負值的柱狀圖。
3	堆疊柱狀圖表具有彼此堆疊的柱狀。
4	堆疊和分組柱狀圖表以堆疊和分組的形式顯示柱狀。
5	帶堆疊百分比的柱狀帶有堆疊百分比的圖表。
6	帶旋轉標籤的柱狀柱狀圖在列中旋轉標籤。
7	帶鑽取的柱狀具有鑽取功能的柱狀圖。
8	帶固定位置的柱狀具有固定位置的柱狀圖。
9	在HTML表格中定義的資料使用在HTML表格中定義的資料的柱狀圖。
10	柱狀範圍使用範圍的柱狀圖。

序號	圖表型別和描述
1	基本餅圖基本餅圖。
2	帶圖例的餅圖帶有圖例的餅圖。
3	環形圖環形圖。
4	半圓環形圖半圓環形圖。
5	帶鑽取的餅圖具有鑽取功能的餅圖。
6	帶漸變的餅圖帶有漸變填充的餅圖。
7	帶單色的餅圖帶有單色填充的餅圖。