Highcharts: добавить маркер на график x-range

Question

Я хочу создать диаграмму гантелей, используя высокие диаграммы.

Для этого я использовал диаграмму х-диапазона

вот ссылка: https://jsfiddle.net/thushara07/nLkxa0wr/15/

 series: [{
       // name: 'Project 3',
        // pointPadding: 0,
        // groupPadding: 0,
        //borderColor: 'gray',
        pointWidth: 5,
        data: [{
            x: 32,
            x2: 33,
            y: 0,
         //   partialFill: 0.25
        }, {

            x: 44,
            x2:45,
            y: 1
        }, {
            x:30,
            x2: 32,
            y: 2
        }],
        dataLabels: {
        align: 'left',
            enabled: true

        }
    }]

ожидаемый результат: Я хочу показать маркеры для каждой строки, созданной как показано (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:

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

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