javascript - 如何将动态数据从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 对象的使用。