如何将动态数据从 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

问题是你正在构建的是一个String，但是你需要传递给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 对象的有用资源。

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

how to insert dynamic data from sql into chartjs stacked bar chart javascript

javascript

dynamic

stacked-chart

chart.js