Chart JS не отображает график

Я работаю с Chart JS, и данные графика не отображаются. Я почти уверен, что следовал правильному способу его реализации, но данные графика не отображаются.

Это ответ данных от API.

response: {
   "users": {
      "1": 3,
      "2": 0,
      "3": 0,
      "4": 0,
      "5": 0,
      "6": 0,
      "7": 0,
      "8": 0,
      "9": 0,
      "10": 0,
      "11": 0,
      "12": 0
   },
   "males": 3,
   "females": 0,
   "docs": {
      "1": 3,
      "2": 0,
      "3": 0,
      "4": 0,
      "5": 0,
      "6": 0,
      "7": 0,
      "8": 0,
      "9": 0,
      "10": 0,
      "11": 0,
      "12": 0
     },
   "regular": 3,
   "contractual": 0
}

и вот как я реализую диаграммы

 var userData;
        var genderData;
        var docsData;
        var empStatusData;

        $.ajax({
            url : dataUrl,
            type : 'GET',
            success : function(response){

                userData = response.users;
                genderData = [response.males,response.females];
                docsData = response.docs;
                empStatusData = [response.regular,response.contractual];
            }
        })
        let chart = document.getElementById('users-chart').getContext('2d');
        let popChart = new Chart(chart,{
            type  : 'bar',
            data : {
                labels : ['Jan', 'Feb', 'Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                datasets : [{
                     label: 'User Registrations this year',
                     data: userData,
                     backgroundColor: 'rgba(0, 119, 204, 0.3)'
                }]
            }

        });

Я получаю только пустой график без данных. что я здесь делаю не так?

Цените помощь. Спасибо всем.


javascript chart.js
person Kim Carlo    schedule 20.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это не так просто. Чтобы обновить диаграмму, вы должны получить доступ к переменной диаграммы, а затем обновить ее поля. Затем вы вызываете функцию update() диаграммы. Как это:

$.ajax({
  url: dataUrl,
  type: 'GET',
  success: function (response) {
    popChart.data.datasets[0].data = response.users;
    popChart.update();
  }
});

Вы также можете создавать функции, которые делают это, чтобы сделать код более читабельным. Как в официальной документации.

У вас есть еще одна проблема с вашим кодом. В ответ вы получаете пользователей и документы в виде объектов с несколькими полями, представляющими месяцы. Chart.js хочет, чтобы данные были в виде массива:

"users": [3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

скорее, чем

"users": { "1": 3, "2": 0, "3": 0, "4": 0, "5": 0, "6": 0, "7": 0, "8": 0, "9": 0, "10": 0, "11": 0, "12": 0 }

Если вы можете изменить код на стороне сервера, вы должны сделать это там. Если нет, вы можете преобразовать ответ пользователей/документов в массивы на стороне клиента. См. это вопросы и ответы.

person Mika Sundland    schedule 20.01.2018