如何在HighCharts中僅從HTML表的一列創建圖形？

Question

我已經從最小值和最大值制作了列范圍圖。 現在，我想顯示表格的均值（平均）列作為這些列范圍上的散點圖。 為此，我只需要平均值列的數據即可創建散點。

我不確定如何解決這個問題。

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

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

我想讓散點圖顯示圖表的列范圍線上的最小值和最大值的平均值。 同樣，顯示數字范圍和平均值的工具提示也很棒。

columnrange圖的JSfiddle在這里。

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