从HTML表中选择行的Highchart

Highchart from select rows in HTML table

本文关键字：Highchart 选择 HTML      更新时间：2023-09-26

我有一个HTML表，其中包含动态生成的值。这是页面加载时的样子:http://jsfiddle.net/HE8Vj/

HTML表的第一列包含复选框。我希望从HTML表生成的饼图仅包含HTML表上其复选框已被选中的行。

我使用Highcharts库制作饼状图。

我已经设法让代码部分工作。当选中(1)或(1、2)或(1、2、3)或(1、2、3)中的复选框时，饼图生成正常

但是当正确的顺序被改变时，比如当跳过一行时，例如:行(2)或(2,3,4)或(1,3,4)或(4)，控制台弹出一个错误，并且不会生成饼状图。

是 JSFIDDLE

这件事已经困扰我很久了。

小代码段: 

                            if ($('#check'+i).is(':checked'))
                            {
                                console.log(i);
                                options.series[0].data[i-1].push(this.innerHTML);
                            }

谢谢!

编辑:这是整个文件(不需要额外的文件来运行它)- http://pastebin.com/nhr4Q0fm

好吧，你有点小题大做了所以现在是这样的:

// Here we iterate on each of the returned selectors (checked inputs)
$.each($(':checked'), function (index, item) {
    // item is the checked input
    //First we get a jQuery reference to the 'item', then we chain the 'parents' method with an argument of 'tr' meaning: get all parents of this 'item' which are a 'tr' element.  Then we get only the first returned on using 'first()' method, then get that returned elements 'children' who are 'td'.
    var tds = $(item).parents('tr').first().children('td');
    // Since we now should have a collection/array of all 'td' in the 'tr' of the ':checked' input we can iterate through the array. Since tds[0] would be the first one in the row, that is where the checked input lives.  Thus tds[1] and tds[2] are 'name' and 'project' respectively.
    var name = $(tds[1]).html();
    var projects = parseFloat($(tds[2]).html());
    // Now we just push the two values as an array
    options.series[0].data.push([name, projects]);
});

演示:http://jsfiddle.net/robschmuecker/W5asQ/2/

我相信这是因为只有在这里检查输入时才会将数据输入到数组中:

if (j == 1) {
    if ($('#check'+i).is(':checked'))
    {
        console.log(i);
        options.series[0].data[i-1].push(this.innerHTML);
        //alert('selected label: ' + this.innerHTML);
    };
}

这意味着每当$('#check'+i)未选中时，您将数组中的.data[i-1]保留为undefined，即Highcharts。图表库不理解。在这些情况下，您应该添加一个空白、零或" "值:

if (j == 1) {
    if ($('#check'+i).is(':checked'))
    {
        console.log(i);
        options.series[0].data[i-1].push(this.innerHTML);
        //alert('selected label: ' + this.innerHTML);
    }else{
        options.series[0].data[i-1].push(" ");
    }
}

确保在j == 2时也输入值为0，否则您将遇到相同的错误。

相关文章：