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