Question

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

以下来自chart.js文档的示例http://www.chartjs.org/docs/#doughnut-pie-chart-example-usage

我们将不胜感激。

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

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

Answer 2

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

 $.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);

Answer 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");
    }
});
(...)

Answer 4

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

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

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

4 个答案: