Как создать диаграмму диапазона столбцов из данных таблицы HTML?

Question

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

Я уже построил гистограмму (график столбцов) из таблицы, но не могу сделатьэто работает для графа диапазона столбцов.

$(function() {

  $('#container').highcharts({
    data: {
      table: 'datatable'
    },
    chart: {
      type: 'column',
      inverted: true
    },
    title: {
      text: 'Data extracted from a HTML table in the page'
    },
    yAxis: {
      allowDecimals: true,
      title: {
        text: 'Mean difference (d)'
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.series.name + '</b><br/>' +
          this.point.y + ' ' + this.point.name.toLowerCase();
      }
    }
  });

});

Я ожидаю получить столбчатый график вместо гистограммы.

Это jsFiddle того, как я хочу, чтобы мой вывод был.

Answer 1

Ниже вы можете найти полностью рабочий пример с columnrange типом серии и формой данных HTML таблица:

Highcharts.chart('container', {
    chart: {
        type: 'columnrange',
        inverted: true
    },
    data: {
        table: 'datatable'
    },
    plotOptions: {
        columnrange: {
            pointWidth: 5,
        }
    }
});

Демонстрационная версия: https://jsfiddle.net/BlackLabel/oks6xf7d/

Справочник по API: https://api.highcharts.com/highcharts/data.table