Highcharts - 两个类别之间的界限

时间:2016-09-22 14:06:28

标签: javascript highcharts

我的图表类型为列范围,我的要求是连接两个类别的行。

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
}]   });});

如何从一个类别到另一个类别绘制线条? 有没有可用的房产?

1 个答案:

答案 0 :(得分: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