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;
                }
            });

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

通过AJAX JSON为Chart.js提供数据不起作用？

2 个答案: