如何仅从 HighCharts 中 HTML 表格的一列创建图形？答案

【问题标题】：How to create graph from only one column of a HTML table in HighCharts?如何仅从 HighCharts 中 HTML 表格的一列创建图形？
【发布时间】：2019-02-11 17:38:01
【问题描述】：

我已经根据最小值和最大值制作了柱形范围图。现在我想将表格的平均（平均）列显示为这些列范围上的散点图。为此，我只需要平均列的数据来创建散点。

我不确定如何解决这个问题。

    chart: {
        type: 'columnrange',
        inverted: true
    },
    data: {
        table: 'datatable'

    tooltip: {
       formatter : function() {
           return '<strong> Range: </strong>' + this.y + ' to ' +this.x;
       } 
    },
    legend: {
        enabled: false
    }

我想要散点显示图表的列范围线上的最小值和最大值的平均值。此外，显示数字范围和平均值的工具提示也很棒。

The JSfiddle of the columnrange graph is here.

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

您可以通过以下方法实现它：

使用Highcharts.Data.prototype.parseTable 获取最后一列的平均值
过滤平均值以获得数字
在加载事件上使用chart.addSeries方法添加散点

代码：

$(function() {

	const table = Highcharts.Data.prototype.parseTable.call({
  	options: {
      table: "datatable",
    },
    columns: [],
    dataFound: () => {}
  });
  
  const scatterData = table[3].reduce((filtered, elem) => {
    const value = +elem;
    if (!isNaN(value)) {
      filtered.push(value);
    }
    return filtered;
  }, []);
  
  Highcharts.chart('container', {
    chart: {
      type: 'columnrange',
      inverted: true,
      events: {
      	load: function() {
          this.addSeries({
          	type: 'scatter',
            data: scatterData
          })
        }
      }
    },
    yAxis: {
      title: {
        text: 'Mean difference (d)'
      }
    },
    data: {
      table: 'datatable'
    },
    plotOptions: {
      columnrange: {
        pointWidth: 5,
      }
    },
    tooltip: {
      formatter: function() {
        if (this.point.low) {
        	return '<strong> Range: </strong>' + this.point.low + ' to ' + this.point.high;
        } else {
        	return '<strong> Mean: </strong>' + this.y;
        }
      }
    },
    legend: {
      enabled: false
    }
  });
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 40%;
}

td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="width: 40%; height: 300px; float: right"></div>

<table id="datatable">
  <thead>
    <tr>
      <th>Treatment</th>
      <th>Min</th>
      <th>Max</th>
      <th>Mean</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Drug1</td>
      <td>-5</td>
      <td>4</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Drug2</td>
      <td>2</td>
      <td>0</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Drug3</td>
      <td>5</td>
      <td>11</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Drug4</td>
      <td>3</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Drug5</td>
      <td>-2</td>
      <td>4</td>
      <td>1.5</td>
    </tr>
  </tbody>
</table>

演示：

https://jsfiddle.net/BlackLabel/7znLy09r/1/

API 参考：

【讨论】：

非常感谢，这正是我想要的。我永远不会通过我自己来思考它。