Highcharts 组合图是一种同时显示多个不同类型图表(比如折线图、柱形图、面积图等)的图表类型。这样的组合图通常用于展示不同数据集之间的关系,以及它们在同一图表中的趋势。以下是一个简单的 Highcharts 组合图的示例,包含了折线图和柱形图:
<!-- 引入 Highcharts 库 -->
<script src="https://code.highcharts.com/highcharts.js"></script>

<!-- 创建图表容器 -->
<div id="chart-container" style="width: 100%; height: 400px;"></div>

<!-- 在 body 标签的底部添加以下 JavaScript 代码 -->
<script>
  // 数据
  var lineData = [5, 3, 7, 2, 4];
  var columnData = [10, 7, 5, 8, 6];

  // 配置 Highcharts 组合图
  Highcharts.chart('chart-container', {
    chart: {
      type: 'column' // 默认图表类型为柱形图
    },
    title: {
      text: 'Highcharts 组合图' // 图表标题
    },
    xAxis: {
      categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'], // x 轴刻度标签
      title: {
        text: 'Categories' // x 轴标题
      }
    },
    yAxis: {
      title: {
        text: 'Values' // y 轴标题
      }
    },
    series: [{
      name: 'Column Series',
      data: columnData // 柱形图数据系列
    }, {
      name: 'Line Series',
      type: 'line', // 折线图数据系列
      data: lineData
    }]
  });
</script>

在上述示例中,通过在 series 数组中添加多个数据系列,每个数据系列可以指定不同类型的图表。这里使用了一个柱形图和一个折线图作为例子,你可以根据需要添加更多的数据系列,并配置它们的类型、样式等。

Highcharts 组合图的特点是可以在同一个图表中显示不同类型的数据,以更全面地呈现多个数据集之间的关系。

你可以根据需要进一步自定义图表,例如添加更多的数据系列、调整颜色和样式、设置工具提示等。请参考 [Highcharts 官方文档](https://api.highcharts.com/highcharts) 以获取更详细的配置选项和示例。


转载请注明出处:http://www.zyzy.cn/article/detail/5055/Highcharts