Highcharts：交互式商业图表库

FreeGuideOnline 最新 2026-06-18

什么是 Highcharts？

Highcharts 是一个使用纯 JavaScript 编写的交互式图表库，能够让你在网页中轻松添加美观、响应迅速且功能丰富的商业图表。它无需任何插件，支持多种图表类型，并提供丰富的配置选项，是数据可视化领域最受欢迎的开源（非商业用途免费）工具之一。

快速上手

引入 Highcharts

你可以通过 CDN 或下载本地文件引入。最推荐的方式是使用 CDN，简单快捷。

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

如果需要导出图表图片或使用特定图表类型（如 3D 饼图），还需引入相应模块：

<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

准备容器

在 HTML 中放置一个 <div> 作为图表的渲染目标。

<div id="chart-container" style="width: 100%; height: 400px;"></div>

编写你的第一个图表

使用 Highcharts.chart() 方法初始化图表，传入容器 ID 和配置对象。

Highcharts.chart('chart-container', {
    chart: {
        type: 'column'          // 图表类型：柱状图
    },
    title: {
        text: '月度销售额'      // 标题
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月']
    },
    yAxis: {
        title: {
            text: '销售额 (万元)'
        }
    },
    series: [{
        name: '北京分公司',
        data: [49.9, 71.5, 106.4, 129.2, 144.0]
    }, {
        name: '上海分公司',
        data: [83.6, 78.8, 98.5, 93.4, 106.0]
    }]
});

以上代码即可生成一个带有两个数据系列的柱状图。

常用图表类型及配置

折线图（Line Chart）

适合展示趋势和连续数据。设置 chart.type 为 'line'。

chart: {
    type: 'line'
},
series: [{
    name: '访问量',
    data: [1520, 1682, 1500, 1855, 1702, 1998],
    color: '#7cb5ec'
}]

可添加 marker、dashStyle 等属性定制折线样式。

饼图与环形图

饼图适合展示占比关系。设置 chart.type 为 'pie'。若要环形图，可设置 plotOptions.pie.innerSize。

chart: {
    type: 'pie'
},
title: {
    text: '市场份额'
},
series: [{
    name: '品牌',
    data: [
        { name: '品牌A', y: 45.0 },
        { name: '品牌B', y: 26.8 },
        { name: '其他', y: 12.8, sliced: true, selected: true }
    ]
}]

如需环形图，在 plotOptions 中添加：

plotOptions: {
    pie: {
        innerSize: '50%', // 环形图内径
        dataLabels: {
            enabled: true,
            format: '{point.name}: {point.percentage:.1f}%'
        }
    }
}

柱状图与条形图

柱状图的类型是 'column'，条形图（横向柱状图）是 'bar'。两者除了坐标轴方向外配置基本相同。

组合图表：可以在一个图表中混合多种类型，使用 series 中每个数据系列的 type 来覆盖全局类型。

series: [{
    type: 'column',
    name: '实际完成',
    data: [150, 180, 200, 170]
}, {
    type: 'spline',
    name: '目标',
    data: [160, 160, 180, 180],
    dashStyle: 'shortdot'
}]

动态图表与实时数据

Highcharts 提供了强大的方法让你更新图表数据而无需重新绘制整个图表。

添加数据点

使用 addPoint() 方法向现有系列添加数据，常用于实时监控。

var chart = Highcharts.chart('container', { /* 初始化配置 */ });
// 每秒添加一个随机数据点
setInterval(function () {
    var x = (new Date()).getTime(), // 当前时间
        y = Math.random();
    chart.series[0].addPoint([x, y], true, true);
}, 1000);

第二个参数 redraw 设为 true 立即重绘，第三个参数 shift 设为 true 则会移除最早的数据点以控制数据窗口大小。

更新系列数据

使用 setData() 完全替换系列数据。

chart.series[0].setData([4, 2, 9, 5, 8]);

更新图表配置

使用 chart.update() 方法可以动态修改标题、坐标轴、系列等高级配置。

chart.update({
    title: {
        text: '更新后的标题'
    },
    chart: {
        type: 'line'
    }
});

交互与响应式

Highcharts 内置了丰富的交互特性：鼠标悬停显示数据点信息（tooltip）、数据点高亮、图例点击切换系列可见性等。

Tooltip 定制

在配置中定义 tooltip 对象，可以使用格式化函数。

tooltip: {
    headerFormat: '<b>{point.key}</b><br/>',
    pointFormat: '数量: {point.y} 台<br/>占比: {point.percentage:.2f}%',
    shared: true,    // 多个系列共享一个 tooltip
    useHTML: true
}

响应式设计

Highcharts 图表默认会根据容器大小自动调整宽度，但你可以通过 chart.reflow() 手动触发重绘，或者设置基于容器百分比的宽高。使用 CSS 设置容器 width: 100%; 即可实现响应式。

对于不同屏幕尺寸的精细控制，可以使用 responsive 配置规则。

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

导出与打印

引入 exporting 模块后，图表右上角会自动出现菜单按钮，支持导出为 PNG、JPEG、PDF 或 SVG。你也可以通过 API 自定义导出行为。

// 直接调用导出
chart.exportChart({ type: 'image/png', filename: 'my-chart' });
// 打印图表
chart.print();

若只想隐藏默认导出按钮，设置 exporting.enabled: false，然后通过自定义按钮触发导出。

主题与样式自定义

Highcharts 提供了多种内置主题（如灰色、网格、暗色等），也可以使用在线图表编辑器自定义主题并下载对应的 JS 文件。通过设置 Highcharts.setOptions() 应用全局主题。

Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5'],
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [[0, 'rgb(255, 255, 255)'], [1, 'rgb(240, 240, 255)']]
        },
        borderWidth: 2,
        plotBackgroundColor: 'rgba(255, 255, 255, .9)',
        plotShadow: true,
        plotBorderWidth: 1
    }
});

对于单个图表，也可直接在配置选项中覆盖样式。

商业许可证注意事项

Highcharts 在个人和非商业项目中免费使用（遵循知识共享署名-非商业性使用 3.0 许可协议），但用于商业网站、政府或内网项目时，必须购买商业许可证。请务必在使用前遵守 Highcharts 的授权要求，以免产生法律风险。

进阶学习资源

  • 官方 API 文档：查询每一个配置项和方法的详细说明，是最权威的参考资料。
  • 在线示例库：官方提供大量可交互的代码示例（JSFiddle），可以直接修改并预览效果。
  • Highcharts 论坛与社区：遇到问题时，可以在 Stack Overflow 上使用 highcharts 标签提问，或浏览官方论坛寻找解决方案。

通过以上基础教程，你已经可以开始构建自己的商业图表。Highcharts 的上手非常平滑，从简单的一行代码到复杂的交互式仪表盘，它都能胜任。现在，不妨去实践一下吧！