如何将sql中的动态数据插入chartjs堆积的条形图javascript

Question

我正在尝试使用chartJS创建动态堆叠的条形图。我知道如何创建常规条形图，但是在尝试创建堆积条形图时遇到问题。对于堆叠的条形图，数据结构不同，我知道如何使用javascript表格动态地将其压缩]

var inchartdatasets = [];
for (var i = 0; i < leninchart; i++) {
    var inlabel = 'label: ' + "'" + inchartlebals[i] + "'";
    var indata = 'data: ' + '[' + inchart[i] + ']';
    var indataset = '{' + inlabel + ',' + indata + ',backgroundColor: color,}'
    inchartdatasets.push(indataset)
}

上面的代码以以下格式创建结果（这是警报的副本）：

{label: 'AAA',data: [76.86],backgroundColor: color,},{label: 'Rating Unknown',data: [11.38],backgroundColor: color,},{label: 'BBB',data: [5.91],backgroundColor: color,},{label: '(1) others',data: [3.51],backgroundColor: color,}

要创建我使用的图表：

var data = {
    datasets :[
    {inchartdatasets}
    ],
};
var chart = new Chart ( ctx, {
    type : "horizontalBar",
    data : data,
    options : options,
});

即使警报中的数据正确，也不会在图表上呈现数据。当我在以下代码中的数据中复制警报消息和硬代码时：

var data = {
        datasets :[
        {label: 'AAA',data: [76.86],backgroundColor: color,},{label: 'Rating Unknown',data: [11.38],backgroundColor: color,},{label: 'BBB',data: [5.91],backgroundColor: color,},{label: '(1) others',data: [3.51],backgroundColor: color,}
        ],
    };

图表正确呈现。

我在这里想念什么？为什么它不能动态渲染？任何帮助表示赞赏。谢谢，

Answer 1

问题是，您要构造的是一个字符串，但是您需要传递给chart.js的数据应该是一个JavaScript对象。参见，例如字符串'{'并将其与其他值连接在一起，您得到的是另一个字符串，chart.js无法使用。

相反，您需要做的是将数据构造为对象，如下所示：

var inchartdatasets = [];
for (var i = 0; i < leninchart; i++) {
    var data = {
        label: inchartlebals[i],
        data: inchart[i],
        backgroundColor: color
    };
    inchartdatasets.push(data);
}

[This MDN page可能也是有用的资源，可以更好地理解使用JavaScript对象。