javascript - Highcharts - 两个类别之间的线

Question

我有一个列范围类型的图表，我的要求是有一条线连接两个类别。

JsFiddle

$(function() {  $('#container').highcharts({
chart: {
  type: 'columnrange',
  inverted: true
},
title: {
  text: 'Test'
},
subtitle: {
  text: 'Sample'
},
xAxis: {
  categories: ['Jan', 'Feb', 'Mar'],
  visible: false
},
yAxis: {
  visible: false
},
legend: {
  enabled: false
},
series: [{
  name: 'Series1',
  data: [
    [0, 3],
    [0, 3],
    [0, 3]
  ],
  pointPlacement: -0.20,
  pointWidth: 50
}, {
  name: 'Series2',
  data: [
    [3, 6],
    [3, 6],
    [3, 6]
  ],
  pointPlacement: 0,
  pointWidth: 1
}, {
  name: 'Series3',
  data: [
    [6, 9],
    [6, 9],
    [6, 9]
  ],
  pointPlacement: 0.20,
  pointWidth: 50
}]   });});

如何从一个类别到另一个类别划一条线？有可用的特性吗？

Answer 1

您应该能够通过简单地向图表添加新的线系列来实现类似的图表:

{
      name: 'Series4',
      type: 'line',
      marker: {
        enabled: false
      },
      index: 1,
      data: [
        [0, 1.5],
        [1, 1.5],
        [2, 1.5]
      ],
    },

在这里您可以看到此图表如何工作的示例:http://jsfiddle.net/ebtygovh/6/

您还可以使用 renderer.path 将线条添加到图表中:http://api.highcharts.com/highcharts/Renderer.path