如何从HighCharts一个HTML表的只有一列创建图表？

Question

我已经从最小值和最大值由列区域图表。现在我要显示表的均值（平均）列在这些columnranges散点图点。为此，我将只需要平均列的数据来创建散点。

我是如何解决这个问题不清楚。

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

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

我想有scatterpoints表示分钟，并在曲线图上的线columnrange最大值的平均值。也显示号码的范围和平均的工具提示将是巨大的。

The JSfiddle of the columnrange graph is here.

Answer 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参考：

• https://api.highcharts.com/class-reference/Highcharts.Data#parseTable
• https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
• https://api.highcharts.com/highcharts/chart.events.load