Блог

Главная - Вопросы по программированию - Отображение данных JSON в виде круговой диаграммы с помощью chart.js

Отображение данных JSON в виде круговой диаграммы с помощью chart.js

#json #ajax #charts #chart.js

#json #ajax #Диаграммы #chart.js

Вопрос:

мой первый раз, используя 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 }
        });
    });
 }

Ответ №1:

возможно, это из-за jquery each, он заполняет массив данных асинхронно, и массив не готов, когда вы хотите использовать его в качестве данных диаграммы. Измените $.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);
       }
}

Комментарии:

1. Я только что попробовал это, но диаграмма все еще не отображается. Если возможно, можете ли вы предоставить для этого рабочий jsfiddle. Спасибо.

2. Есть ли какие-либо сообщения об ошибках на консоли панели инструментов разработчика?

3. Несколько ошибок, которые я видел, были частью некоторых rss-каналов, которые я пытаюсь добавить на свою страницу, но не связаны с диаграммой. С тех пор я их очистил, но они все еще не отображаются. Холст занимает пространство (ширина и высота), которое я выделил, но он просто не отображает саму круговую диаграмму.

4. Я отредактировал свой ответ выше, проверьте часть push. Данные должны представлять собой массив чисел, но ранее (и в вашем коде) это был массив массивов.

5. Похоже, ошибка при вводе данных 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:

Проблема заключается в вашем массиве данных. Способ его реализации — это массив с одной записью. Который сам по себе является другим массивом.

 [[<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 за ваш вклад.

Эта ссылка помогла мне, надеюсь, это кому-то поможет.