javascript - 使用 Chart.js 将 JSON 数据绘制到图表上

Question

我有一个问题希望能得到帮助。我已经阅读了一些教程和这里的一些问题，但似乎没有一个能回答我的问题。我正在向我的 PHP 文件发出 ajax 请求，该文件会返回一个 JSON 响应，例如如下所示(控制台记录的输出):

{ Email addresses: 4, IP addresses: 2, Names: 1 }

我希望能够使用 Chart.js 将其绘制到图表上，但是我已经尝试过:

$.each(res, function(i, item) {
    data = {
        label: i,
        value: item
    }
}
var myDoughnutChart = new Chart(ctx).Pie(data);

问题是它只填充一种颜色和一个具有一个值的标签。有什么方法可以更改 JSON 输出的格式，使其显示为:

{ "Label":"Email addresses","Value":"4" }

必须使用 Javascript/JQuery 进行更改。我必须指出，标签并不总是相同，因为有时 JSON 输出可能会有所不同，例如:

{ Usernames: 3, Passwords: 3, Names: 1 }

同样，上面只是我在输出到控制台时得到的结果。

我还应该如何在 JQuery 或其他中使用 $.each() 来绘制图表？任何帮助将不胜感激，抱歉这个问题太长了。

Answer 1

当您使其与当前项相等时，您始终会覆盖data，并且将等于循环后的最后一个元素。您需要向其中添加元素，因此图表中会有更多元素。

$.each(res, function(i, item) {
    if (!Array.isArray(data)) {
        data = [];
    }
    data.push({
        label: i,
        value: item
    });
}
var myDoughnutChart = new Chart(ctx).Pie(data);