一、Highcharts 簡介
Highcharts 是一款使用 JavaScript 編寫的前端數據可視化庫，支持折線圖、柱狀圖、餅圖、面積圖、散點圖等多種圖表類型，特點是渲染性能優秀、交互豐富、兼容性強，適合構建商業圖表、統計報表等。
二、Highcharts 安裝方式
2.1 使用 CDN 引入（推薦快速入門）
<script src="https://code.highcharts.com/highcharts.js"></script>
2.2 使用 npm 安裝（適合項目集成）
npm install highcharts --save
在模塊中導入：
import Highcharts from 'highcharts';
三、基本使用示例
3.1 HTML + JavaScript 示例
<div id="container" style="width:600px; height:400px;"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>Highcharts.chart('container', {title: {text: '月平均氣溫'},xAxis: {categories: ['一月', '二月', '三月', '四月', '五月', '六月']},yAxis: {title: {text: '溫度 (°C)'}},series: [{name: '北京',data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7]}]});
</script>
四、支持的圖表類型
| 圖表類型 | 配置關鍵字 |
|---|---|
| 折線圖 | line |
| 區域圖 | area |
| 柱狀圖 | column |
| 條形圖 | bar |
| 餅圖 | pie |
| 散點圖 | scatter |
| 儀表圖 | gauge |
| 雷達圖 | polar |
五、自定義配置項
Highcharts 支持大量配置，包括：
- 標題、副標題（
title,subtitle） - 圖例設置（
legend） - 工具提示（
tooltip） - 導出功能（
exporting） - 數據標簽（
dataLabels） - 自定義樣式（
plotOptions）
示例：
tooltip: {pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {column: {dataLabels: {enabled: true}}
}
六、響應式與主題支持
6.1 響應式
Highcharts 圖表默認具備響應式，可通過容器寬高自適應調整。
6.2 使用主題
引入主題：
<script src="https://code.highcharts.com/themes/dark-unica.js"></script>
或通過配置自定義樣式：
Highcharts.setOptions({colors: ['#058DC7', '#50B432', '#ED561B']
});
七、與框架集成
- React：使用
highcharts-react-official - Vue：使用
highcharts-vue - Angular：使用
highcharts-angular
八、常見問題
Q1: 圖表未顯示？
- 檢查容器 ID 是否正確
- 檢查容器是否設置了寬高
Q2: 圖表數據不更新？
- 使用
chart.series[0].setData([...])或重新調用Highcharts.chart()生成新圖
Q3: 商業使用是否收費？
Highcharts 對商業項目是付費授權，非商業/學習用途免費。
九、學習資源推薦
- Highcharts 官網
- Highcharts API 文檔
- Highcharts 示例庫
- 菜鳥教程 Highcharts
本文由“小奇Java面試”原創發布，轉載請注明出處。
可以搜索【小奇JAVA面試】第一時間閱讀，回復【資料】獲取福利，回復【項目】獲取項目源碼，回復【簡歷模板】獲取簡歷模板，回復【學習路線圖】獲取學習路線圖。
)
