通过AJAX JSON向Chart.js提供数据无法正常工作？

Question

我正在构建一个仪表板，我想将数据库中的信息直接显示到Chart.js。

我创建了Ajax，它返回了正确的数据。 我将其全部放在以下代码中：

$.ajax({
    type: 'GET',
    url: "http://localhost/cwwa/web/app.php/AJAX/dashboard/",
    contentType: "application/json",
    success: function(json) {

        var ChartData = json.enviFig;

        var oacData = [
            $.each(ChartData, function(i, item) {
                {
                    value: ChartData[i].totalTonne;
                    color: "#F7464A";
                    highlight: "#FF5A5E";
                    label: ChartData[i].wasteType;
                }
            })
        ];

        var rCM = document.getElementById("recycledChartMain").getContext("2d");

        var recycledChartMain = new Chart(rCM).Pie(oacData);

    }

});

但是，在加载页面时，该图不会出现。 Firebug也不是错误，仅此警告与Chart.js文件有关：

canvas：尝试将strokeStyle或fillStyle设置为既不是字符串，CanvasGradient或CanvasPattern都不是的值。

怎么了

Answer 1

填充oacData的方式听起来不正确。 我希望这样：

var oacData = [];
$.each(ChartData, function(i, item) {
    oacData.push(
        {
            value: ChartData[i].totalTonne,
            color: "#F7464A",
            highlight: "#FF5A5E",
            label: ChartData[i].wasteType
        }
    );
});

Answer 2

现在，oacData是数组中数组内的对象。 这就是为什么Chart.js无法解析您的数据的原因。 只需省略括号即可：

var oacData = $.each(ChartData, function(i, item) {
                {
                    value: ChartData[i].totalTonne;
                    color: "#F7464A";
                    highlight: "#FF5A5E";
                    label: ChartData[i].wasteType;
                }
            });

您将拥有一个包含对象的数组。