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();
      }
    }
  });

});

我希望获得柱状图而不是条形图。

这是我希望输出结果如何的Update By Query API。

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

如何从HTML表的数据创建列范围图？

1 个答案: