- Highcharts教程
- Highcharts - 首頁
- Highcharts概述
- Highcharts - 環境搭建
- Highcharts - 配置語法
- Highcharts - 折線圖
- Highcharts - 面積圖
- Highcharts - 條形圖
- Highcharts - 柱狀圖
- Highcharts - 餅圖
- Highcharts - 散點圖
- Highcharts - 氣泡圖
- Highcharts - 動態圖表
- Highcharts - 組合圖表
- Highcharts - 三維圖表
- Highcharts - 指標儀表盤
- Highcharts - 熱力圖
- Highcharts - 樹狀圖
- Highcharts實用資源
- Highcharts - 快速指南
- Highcharts - 資源
- 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 | 三維圖表 用於繪製三維圖表。 |
| 9 | 指標儀表盤 用於繪製速度計型別的圖表。 |
| 10 | 熱力圖 用於繪製熱力圖。 |
| 11 | 樹狀圖 用於繪製樹狀圖。 |
在接下來的章節中,我們將詳細討論上面提到的每種型別的圖表,並附帶示例。
許可證
Highcharts是開源的,可免費用於非商業用途。要在商業專案中使用Highcharts,請訪問以下連結:許可證和定價