Highcharts 组合

Highcharts 是一个开源的图表库，使用 JavaScript 实现，支持各种类型的图表，包括线性图、区域图、柱状图、饼图等等。Highcharts 还支持响应式设计，可轻松适应各种屏幕大小和设备。

Highcharts 组合是 Highcharts 图表库的一种特性，它允许将不同类型的图表组合在一起，以创建更为复杂的图表。例如，你可以将柱状图和线性图组合在一起，同时显示两种不同的数据。

如何使用 Highcharts 组合

要使用 Highcharts 组合，你需要首先引入 Highcharts 库和对应的主题。

<!-- 引入 Highcharts 库 -->
<script src="https://code.highcharts.com/highcharts.js"></script>

<!-- 引入对应主题 -->
<script src="https://code.highcharts.com/themes/dark-unica.js"></script>

接下来，你需要创建一个空白的 Highcharts 容器，在容器中放置你想要的图表。

<!-- 创建容器 -->
<div id="container"></div>

// 创建图表
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
    title: {
      text: 'Rainfall (mm)'
    }
  },
  series: [{
    name: 'Tokyo',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }, {
    name: 'New York',
    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
  }, {
    name: 'London',
    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
  }, {
    name: 'Berlin',
    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
  }]
});

注意，在创建各种类型的图表时，需要指定 type 属性。然后，你可以使用 series 属性指定数据。可以用 categories 属性指定 x 轴类别。

组合图表

要创建组合图表，只需先创建一个图表，然后在其他的图表中添加数据。你可以使用 addSeries 方法将不同类型的图表添加到数据中。

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Monthly Average Temperature'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: [{
    title: {
      text: 'Temperature (°C)'
    }
  }, {
    title: {
      text: 'Rainfall (mm)'
    },
    opposite: true
  }],
  series: [{
    name: 'Tokyo',
    yAxis: 0,
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }, {
    name: 'Rainfall',
    yAxis: 1,
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});

在上面的代码中，我们创建了一个线性图表，并在第二个 y 轴中添加了降雨数据。注意，我们还指定了 yAxis 属性，将降雨数据和第二个 y 轴相关联。

总结

Highcharts 组合是一种强大的功能，它可以将不同类型的图表组合在一起，以创建更为复杂的图表。要使用 Highcharts 组合，你只需要创建一个空白的 Highcharts 容器，并在容器中放置你想要的图表。然后，使用 addSeries 方法将其他类型的图表添加到数据中即可。