Highcharts 安装使用教程
一、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面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。
