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