使用 chart.js 将 JSON 数据显示到饼图中答案

【问题标题】：Displaying JSON data into a pie chart using chart.js使用 chart.js 将 JSON 数据显示到饼图中
【发布时间】：2016-10-18 17:03:50
【问题描述】：

我第一次使用chart.js，遇到了一个我似乎无法解决的小错误。下面是我的代码，但是，它只是显示标签而不是呈现饼图本身。

我在 http://www.chartjs.org/docs/#doughnut-pie-chart-example-usage 处关注 chart.js 文档中的示例

您的帮助将不胜感激。

<canvas id="myChart" width="200" height="200"></canvas>

 $(document).ready(function () {
 /*
         -> #47A508 = green (wins)
         -> #ff6a00 = orange (losses)
         -> #ffd800 = yellow (draws)
    */
    var DataArray = [];
    var ctx = document.getElementById("myChart");

    $.ajax({
        url: 'http://api.football-data.org/v1/competitions/426/leagueTable',
        dataType: 'json',
        type: 'GET',
    }).done(function (result) {
        $.each(result.standing, function () {
            var name = "Manchester United FC";
            if (this.teamName == name) {
                DataArray.push([this.wins, this.losses, this.draws]);
            }
        });
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                label: 'Manchester United Current Form',
                labels: [
                        "Wins",
                        "Losses",
                        "Draws"
                ],
                datasets: [
                    {
                        data: DataArray,
                        backgroundColor: [
                            "#47A508",
                            "#ff6a00",
                            "#ffd800"
                        ],
                        hoverBackgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56"
                        ]
                    }]
            },
            options: { responsive: true }
        });
    });
 }

【问题讨论】：

标签： json ajax charts chart.js

【解决方案1】：

可能是因为每个 jquery，当您想将其用作图表数据时，它会异步填充 DataArray 并且数组尚未准备好。将 $.each 更改为简单的 js for 循环

for(var i = 0; i < result.standing; i++){
   var name = "Manchester United FC";
   var team = result.standing[i];
       if (team.teamName == name) {
          DataArray.push(team.wins, team.losses, team.draws);
       }
}

【讨论】：

我刚试过这个，但图表仍然没有呈现。如果可能的话，您能否为此提供一个有效的 jsfiddle。谢谢。
开发工具栏控制台是否有错误信息？
我看到的几个错误是我试图添加到我的页面的一些 rss 提要的一部分，但与图表无关。我已经清理了这些，但它仍然没有渲染。画布占用了我分配的空间（宽度和高度），但它只是不显示饼图本身。
我在上面编辑了我的答案，检查推送部分。数据必须是一个数字数组，但以前（在您的代码中）它是一个数组数组。
将 json 数据推送到数组中似乎是一个错误。我尝试了您的解决方案，但是使用 $.each 和 for 循环，当我在浏览器控制台上运行调试器时，数据被推送到数组中。

【解决方案2】：

尝试callbacks 为您的ajax 或执行以下操作（这是一个肮脏的解决方案）：

 $.ajax({
        url: 'http://api.football-data.org/v1/competitions/426/leagueTable',
        dataType: 'json',
        cache: false, //add this
        async: false, //add this
        type: 'GET',

还有可以使用下面的代码而不是使用数组来返回您的 ajax 的结果。

jQuery.parseJSON(result);

【讨论】：

【解决方案3】：

问题在于您的 DataArray。它的实现方式是一个具有单个条目的数组。这是另一个数组本身。

[[<wins>, <losses>, <draws>]]

而不是

[<wins>, <losses>, <draws>]

那是因为你实例化了一个数组，然后将一个数组对象推入其中。

要解决此问题，请尝试使用以下函数：

(...)
$.each(result.standing, function () {
    var name = "Manchester United FC";
    if (this.teamName == name) {
        DataArray = ([this.wins, this.losses, this.draws]);
        console.log("This team name");
    }
});
(...)

【讨论】：

【解决方案4】：

我解决了这个问题，很遗憾，没有什么魔法可以吹嘘。最初的代码没有任何问题，但是，这是 DOM 渲染性能的问题。也感谢@alwaysVBNET 和@Aniko Litvanyi 的投入。

这个link 帮助了我，希望它对那里的人有用。

【讨论】：