如何创建从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