异常教程

Highcharts 组合图（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

什么是 Highcharts 组合图？

Highcharts 组合图（Highcharts Combination Chart）是一种结合多种图表类型的可视化工具。它允许用户在同一图表中混合使用柱状图、折线图、面积图等，从而更直观地展示复杂的数据关系。想象一下，这就像一个交响乐团：不同乐器（图表类型）各司其职，共同演绎出数据背后的故事。

组合图的核心优势在于，它能同时呈现多维度的数据特征。例如，在销售分析中，柱状图可以展示每月销售额（绝对值），而折线图则能突出利润率（相对变化趋势）。这种“双重视角”让决策者能快速捕捉关键信息。

如何创建第一个 Highcharts 组合图？

步骤 1：准备 HTML 结构

首先，在 HTML 文件中引入 Highcharts 的核心库和组合图模块：

<!-- 引入 Highcharts 核心库 -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- 引入组合图模块 -->
<script src="https://code.highcharts.com/modules/combination.js"></script>

然后，添加一个容器元素：

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

步骤 2：编写基础配置代码

通过 JavaScript 初始化图表：

Highcharts.chart('container', {
    title: {
        text: '2023年销售与利润分析'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月']
    },
    yAxis: [{
        title: {
            text: '销售额（万元）'
        }
    }, {
        title: {
            text: '利润率（%）',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        opposite: true // 右侧 Y 轴
    }],
    series: [{
        type: 'column', // 柱状图
        name: '销售额',
        data: [120, 150, 180, 200, 220],
        yAxis: 0 // 绑定左侧 Y 轴
    }, {
        type: 'line', // 折线图
        name: '利润率',
        data: [15, 18, 16, 20, 22],
        yAxis: 1 // 绑定右侧 Y 轴
    }]
});

关键配置解析

  • xAxis.categories：定义 X 轴的分类标签，如月份。
  • yAxis：通过数组支持多 Y 轴，opposite: true 将第二个 Y 轴放置在右侧。
  • series：每个系列（series）通过 type 指定图表类型，yAxis 指定绑定的 Y 轴索引。

组合图的高级配置技巧

1. 数据联动与交互

Highcharts 组合图支持丰富的交互功能，例如：

  • 缩放：允许用户通过拖拽 X/Y 轴区域放大细节。
  • 数据提示（Tooltip）：在鼠标悬停时显示多系列数据。
tooltip: {
    shared: true, // 同步显示同一 X 值的所有系列数据
    crosshairs: true // 显示交叉线辅助定位
},
plotOptions: {
    series: {
        cursor: 'pointer',
        point: {
            events: {
                click: function() {
                    alert(`点击了 ${this.series.name} 的 ${this.category} 数据点`);
                }
            }
        }
    }
}

2. 样式与主题定制

通过 colors、chart.backgroundColor 等属性调整视觉效果：

chart: {
    type: 'column',
    backgroundColor: '#f8f9fa',
    style: {
        fontFamily: 'Arial, sans-serif'
    }
},
colors: ['#2c7be5', '#e34234', '#4CAF50'], // 自定义颜色列表

实战案例：多维度数据可视化

场景描述

假设需要分析某电商季度销售数据，需同时展示：

  1. 每日订单量（柱状图）
  2. 用户访问量趋势（折线图）
  3. 库存量变化（面积图）

数据准备

构造以下数据集：

日期订单量访问量库存量
2023-01-0180050001200
2023-01-0295062001100
............

完整代码实现

Highcharts.chart('container', {
    title: {
        text: '电商运营数据看板'
    },
    xAxis: {
        type: 'datetime' // 时间轴类型
    },
    yAxis: [{
        title: { text: '订单量' },
        labels: { format: '{value}' }
    }, {
        title: { text: '访问量' },
        opposite: true,
        labels: { format: '{value}' }
    }, {
        title: { text: '库存量' },
        labels: { format: '{value}' }
    }],
    series: [{
        type: 'column',
        name: '订单量',
        data: [
            [Date.UTC(2023, 0, 1), 800],
            [Date.UTC(2023, 0, 2), 950],
            // ... 其他数据
        ],
        yAxis: 0
    }, {
        type: 'line',
        name: '访问量',
        data: [
            [Date.UTC(2023, 0, 1), 5000],
            [Date.UTC(2023, 0, 2), 6200],
            // ... 其他数据
        ],
        yAxis: 1
    }, {
        type: 'area',
        name: '库存量',
        data: [
            [Date.UTC(2023, 0, 1), 1200],
            [Date.UTC(2023, 0, 2), 1100],
            // ... 其他数据
        ],
        yAxis: 2
    }]
});

关键点解析

  • xAxis.type：设置为 datetime 后，X 轴会自动处理日期格式。
  • 数据格式：每个数据点是一个数组 [时间戳, 值]。
  • Y 轴绑定：通过 yAxis 索引区分三个系列的 Y 轴。

常见问题与解决方案

问题 1：图表显示空白

可能原因：

  • 未正确引入组合图模块。
  • 数据格式错误（如未指定 xAxis.categories 或时间戳）。

解决方案：
检查代码中是否包含：

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

问题 2：多 Y 轴比例失衡

现象：右侧 Y 轴数值范围过小，导致折线图显示为一条直线。

解决方法：
手动设置 yAxis.max 和 yAxis.min，或使用 startOnTick: false 灵活调整范围：

yAxis: [{
    // 左侧 Y 轴
}, {
    // 右侧 Y 轴
    max: 100,
    min: 0,
    startOnTick: false
}]

问题 3：移动端显示模糊

原因：默认分辨率不适应小屏幕设备。

修复方案：
通过 chart.renderTo 或 CSS 设置容器宽度为 100%，并添加响应式调整：

#container {
    width: 100%;
    height: auto;
    min-height: 300px;
}

进阶技巧：动态数据与实时更新

实现思路

通过 setInterval 定期更新数据，模拟实时监控场景：

// 初始化图表
let chart = Highcharts.chart('container', {
    // 其他配置...
});

// 每 2 秒更新数据
setInterval(() => {
    const newOrder = Math.floor(Math.random() * 200) + 800;
    const newX = Date.now(); // 当前时间戳

    // 更新订单量系列
    chart.series[0].addPoint([newX, newOrder], true, true);
    chart.redraw();
}, 2000);

功能扩展

  • 数据平滑：使用 line 系列的 step 属性实现阶梯图。
  • 图例交互：通过 showInLegend: true 显示图例，并允许用户隐藏系列。

结论

Highcharts 组合图通过灵活的图表类型组合和强大的配置选项，成为数据可视化的利器。无论是分析销售趋势、监控运营指标，还是探索多维度数据关系，它都能提供清晰、直观的解决方案。

对于编程初学者，建议从基础配置开始，逐步尝试添加交互功能和样式调整；中级开发者则可探索动态数据、性能优化等高级主题。记住，实践是掌握 Highcharts 组合图的最佳途径——尝试用真实数据替换示例代码，你将收获更多！

通过本文，我们不仅掌握了组合图的核心用法，还学习了如何解决常见问题、提升用户体验。希望这些知识能帮助你将数据转化为更有价值的洞察。

最新发布

查看更多文章