Question

我想使用高图创建哑铃图。

我为此使用了x范围图

这是链接：https://jsfiddle.net/thushara07/nLkxa0wr/15/

some_pattern

预期的输出：我想显示创建的每一行的标记，如下所示（https://images.app.goo.gl/LAKQBdsaKBH2hjS59 ）

Answer 1

可以通过添加链接到scatter的其他x-range系列来完成：

代码：

Highcharts.chart('container', {
  yAxis: {
    title: {
      text: ''
    },
    categories: ['Prototyping', 'Development', 'Testing'],
    reversed: true
  },
  series: [{
    type: 'xrange',
    pointWidth: 5,
    id: 'main',
    data: [{
      x: 32,
      x2: 33,
      y: 0
    }, {
      x: 44,
      x2: 45,
      y: 1
    }, {
      x: 30,
      x2: 32,
      y: 2
    }],
    dataLabels: {
      align: 'center',
      enabled: true
    }
  }, {
    type: 'scatter',
    linkedTo: 'main',
    marker: {
        radius: 5
    },
    data: [{
        x: 32,
      y: 0,
      color: 'red'
    }, {
        x: 33,
      y: 0,
      color: 'grey'
    }, {
        x: 44,
      y: 1,
      color: 'red'
    }, {
        x: 45,
      y: 1,
      color: 'grey'
    }, {
        x: 30,
      y: 2,
      color: 'red'
    }, {
        x: 32,
      y: 2,
      color: 'grey'
    }]
  }]
});

演示：

https://jsfiddle.net/BlackLabel/4qj89cog/

API参考：

高图：将标记添加到x范围图表

1 个答案: