Highcharts 组合图

Highcharts 是一个开源的 JavaScript 图表库，可以用来显示各种类型的交互式图表，支持丰富的数据可视化功能。

组合图是一个同时显示多个不同类型的图表的图表，例如：柱状图和折线图的组合。在这篇文档中，我们将介绍如何使用 Highcharts 创建组合图。

创建组合图

Highcharts 中的组合图是通过创建多个不同类型的图表，并将它们叠加在同一个图表上来实现的。

以下是如何创建组合图的步骤：

步骤 1：导入 Highcharts 库

在 HTML 文件中引入 Highcharts 库，可以从官方网站 https://www.highcharts.com/ 下载。

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

步骤 2：准备数据

在 JavaScript 文件中准备好要显示的数据，可以使用 JavaScript 数组、对象或 JSON 格式的数据。

var data = [{
    name: '图表 1',
    type: 'column',
    data: [1, 2, 3, 4, 5]
}, {
    name: '图表 2',
    type: 'line',
    data: [5, 6, 7, 8, 9]
}];

步骤 3：创建 Highcharts 图表

使用 Highcharts 构造函数创建一个新的图表对象。创建时可以传入一个包含图表参数的对象。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    title: {
        text: 'Highcharts 组合图'
    },
    series: data
});

步骤 4：通用配置

在创建组合图的过程中，通常需要对整个图表进行通用配置，例如：设置图表的标题、x 轴和 y 轴标签、颜色等等。在 Highcharts 中，这些通用的配置项可以在构造函数中通过一个对象设置。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    title: {
        text: 'Highcharts 组合图'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月']
    },
    yAxis: {
        title: {
            text: '数值'
        }
    },
    series: data
});

步骤 5：设置不同类型的图表

创建组合图时，需要将不同类型的图表组合在一起。在上面的示例中，我们创建了一个柱状图和一条折线图。为了实现这个效果，我们需要为每个图表设置一个不同的 type 值。

var data = [{
    name: '图表 1',
    type: 'column',
    data: [1, 2, 3, 4, 5]
}, {
    name: '图表 2',
    type: 'line',
    data: [5, 6, 7, 8, 9]
}];

步骤 6：设置图例

要让用户能够区分不同类型的图表，需要为每个图表设置一个图例。可以通过配置 legend 项来设置。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    title: {
        text: 'Highcharts 组合图'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月']
    },
    yAxis: {
        title: {
            text: '数值'
        }
    },
    legend: {
        align: 'center',
        verticalAlign: 'bottom',
        borderWidth: 0
    },
    series: data
});

总结

组合图可以通过将多个不同类型的图表叠加在同一个图表上来实现。在 Highcharts 中创建组合图需要完整的数据准备和配置工作。您需要为每个图表设置不同的类型、颜色、图例和其他样式。如果不熟悉 Highcharts 的 API，可能需要花些时间研究文档和示例。

Highcharts 环境配置 Highcharts 配置语法