Highcharts 安装使用教程

一、Highcharts 简介

Highcharts 是一款使用 JavaScript 编写的前端数据可视化库，支持折线图、柱状图、饼图、面积图、散点图等多种图表类型，特点是渲染性能优秀、交互丰富、兼容性强，适合构建商业图表、统计报表等。

二、Highcharts 安装方式

2.1 使用 CDN 引入（推荐快速入门）

html 复制代码

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

2.2 使用 npm 安装（适合项目集成）

bash 复制代码

npm install highcharts --save

在模块中导入：

js 复制代码

import Highcharts from 'highcharts';

三、基本使用示例

3.1 HTML + JavaScript 示例

html 复制代码

<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）

示例：

js 复制代码

tooltip: {
  pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
  column: {
    dataLabels: {
      enabled: true
    }
  }
}

六、响应式与主题支持

6.1 响应式

Highcharts 图表默认具备响应式，可通过容器宽高自适应调整。

6.2 使用主题

引入主题：

html 复制代码

<script src="https://code.highcharts.com/themes/dark-unica.js"></script>

或通过配置自定义样式：

js 复制代码

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 对商业项目是付费授权，非商业/学习用途免费。

九、学习资源推荐

本文由"小奇Java面试"原创发布，转载请注明出处。

可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。