javascript - 如何将其制作为 HighChart(附图)

Question

Highcharts 专家!我想制作以下图表(使用 Highcharts 框架)，但不知道从哪里开始。我是否需要将多个图表叠加到一个图表中？我将如何创建具有如所附示例中的图片所示范围的框？有人有任何例子吗？

Answer 1

您可以使用带有两个堆叠系列的columnrange系列类型来实现它。第一个系列将呈现从最小到中间的列，第二个系列将呈现从中间到最大的列。要绘制点，请使用另一个系列类型scatter。检查下面发布的演示和代码。

代码:

Highcharts.chart('container', {
  chart: {
    type: 'columnrange'
  },
  xAxis: [{
    categories: ['1', '2', '3', '4', '5']
  }, {
  	visible: false,
  	min: 0,
    max: 100
  }],
  yAxis: {
  	min: 0,
    max: 100
  },
  plotOptions: {
  	series: {
    	stacking: 'normal'
    }
  },
  series: [{
  	id: 'main',
    name: 'Grades',
    data: [
      [20, 25], // min, min
      [30, 40],
      [30, 50],
      [35, 55]
    ]
  }, {
  	linkedTo: 'main',
    data: [
      [25, 35], // mid, max
      [40, 50],
      [50, 80],
      [55, 70]
    ]
  }, {
  	type: 'scatter',
    xAxis: 1,
    name: 'Eployees',
    data: [
    	[8, 30],
      [8.5, 25],
      [9, 15],
      [9.5, 28],
      [10, 33],
      [10.5, 25],
    ]
  }]
});

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

演示:

• https://jsfiddle.net/BlackLabel/enqLmpd8/

API引用:

• https://api.highcharts.com/highcharts/series.columnrange

• https://api.highcharts.com/highcharts/series.scatter