Highcharts图表栏-如何在图表中显示,只显示HTML表中的一列

Highcharts Chart Bar - How can I display in the chart, only one column from my HTML table?

本文关键字:显示 一列 HTML Highcharts      更新时间:2023-09-26

我得到了一个条形图,它从页面中的HTML表中提取数据。http://www.highcharts.com/demo/column-parsed

如果我们按照上面的例子,Johncomcolumn。。。

这是构建serias 的代码

// the categories
options.xAxis.categories = [];
$('tbody th', table).each( function(i) {
    options.xAxis.categories.push(this.innerHTML);
});
// the data series
options.series = [];
$('tr', table).each( function(i) {
    var tr = this;
    $('th, td', tr).each( function(j) {
        if (j > 0) { // skip first column
            if (i == 0) { // get the name and init the series
                options.series[j - 1] = {
                    name: this.innerHTML,
                    data: []
                };
            } else { // add values
                options.series[j - 1].data.push(parseFloat(this.innerHTML));
            }
        }
    });
});

为了达到最后一个,我尝试只读取等于2的列,但没有成功

if (j == 2) { ... }

希望有人能比我有更好的答案。什洛米。

试试这个:

options.series = [];
$('tr', table).each( function(i) {
    var tr = this;
    $('th, td', tr).each( function(j) {
        if (j == 2) { // get only column 2
            if (i == 0) { // get the name and init the series
                options.series[0] = {
                    name: this.innerHTML,
                    data: []
                };
            } else { // add values
                options.series[0].data.push(parseFloat(this.innerHTML));
            }
        }
    });
});

您需要检查j == 2,以便只获得第2列中的数据,然后在创建options.series阵列时,您需要使用0-Highcharts至少需要series[0] 中的数据

此处的工作示例