[英]Highcharts Chart Bar - How can I display in the chart, only one column from my HTML table?
[英]How to create graph from only one column of a HTML table in HighCharts?
我已经从最小值和最大值制作了列范围图。 现在,我想显示表格的均值(平均)列作为这些列范围上的散点图。 为此,我只需要平均值列的数据即可创建散点。
我不确定如何解决这个问题。
chart: {
type: 'columnrange',
inverted: true
},
data: {
table: 'datatable'
tooltip: {
formatter : function() {
return '<strong> Range: </strong>' + this.y + ' to ' +this.x;
}
},
legend: {
enabled: false
}
我想让散点图显示图表的列范围线上的最小值和最大值的平均值。 同样,显示数字范围和平均值的工具提示也很棒。
您可以通过以下方法来实现:
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>
演示:
API参考:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.