来自 HTML 表中选择行的 Highchart

Question

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

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

我正在为饼图使用 Highcharts 库。

我已经设法让代码部分工作。 When checkboxes in row (1) or (1,2) or (1,2,3) or (1,2,3,4) are selected, the pie chart is generated properly.

但是当正确的顺序被改变时，比如当一行被跳过时，例如：第 (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

Answer 1

好吧，你有点矫枉过正了，所以现在看起来是这样的：

// 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/

Answer 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.Chart 库无法理解的。在这些情况下，您应该添加一个空白、零或 " " 值：

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 值，否则会遇到同样的错误。