Chart.js - 绘制具有多个标签的条形图答案

【问题标题】：Chart.js - Draw bar chart with multiple labelsChart.js - 绘制具有多个标签的条形图
【发布时间】：2018-03-18 10:13:33
【问题描述】：

我正在尝试使用使用多个标签的 chart.js 绘制条形图，以便我可以操作它们。我设法用折线图做到了这一点，并尝试扩展我在那里所做的事情，但没有运气。我收到这个错误。是什么原因造成的？

“未捕获的 TypeError：Object.defineProperty 在非对象上调用”。

问题出在数据的某处：{}，因为当我将数据作为简单的 2 索引数组时，它工作正常。

编辑：当单步执行 dataset = null;

        var com_passed = rows[rows.length-2]["# Common Passed"];
        var com_failed = rows[rows.length-2]["# Common Failed"];
        var ctx = document.getElementById("common_chart");
        ctx.height = 50;

        var historicalChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["Passed", "Failed"],
                datasets: [
                { 
                    data: com_passed,
                    label: "Passed",
                    fillColor: "red"
                },
                { 
                    data: com_failed,
                    label: "Failed",
                    fillColor: "green"                      
                }
                    ]
            },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                            beginAtZero:true,
                            responsive: false,
                            maintainAspectRatio: true
                            }
                        }]
                    }
                }
        });

【问题讨论】：

您是否尝试单步执行您的代码？然后，您也许可以将其范围缩小到比“数据中的某个位置”更近的程度。
我刚刚浏览了代码，它显示数据集为空。我很难弄清楚原因。
这是问题正文中应该包含的那种细节。
console.log(com_passed, com_failed)??
我会编辑它@jdv console.log(com_passed, com_failed)

标签： javascript charts chart.js papaparse

【解决方案1】：

对于那些有类似问题的人。我需要将数据 com_passed 和 com_failed 作为数组而不是像这样的整数。

    var com_passed = rows[rows.length-2]["# Common Passed"];
    var com_failed = rows[rows.length-2]["# Common Failed"];
    var ctx = document.getElementById("common_chart");
    ctx.height = 50;

    var historicalChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Passed", "Failed"],
            datasets: [
            { 
                data: [com_passed],
                label: "Passed",
                fillColor: "red"
            },
            { 
                data: [com_failed],
                label: "Failed",
                fillColor: "green"                      
            }
                ]
        },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                        beginAtZero:true,
                        responsive: false,
                        maintainAspectRatio: true
                        }
                    }]
                }
            }
    });

【讨论】：