отображение данных из json в jscharts? - PullRequest
Новая
       19

отображение данных из json в jscharts?

0 голосов
/ 21 октября 2019

У меня есть JSON API, который я хотел бы вывести на диаграмму jschart. Сначала я не мог получить данные в чат, но теперь могу, но диаграмма не отображается и выдает ошибку, как описано ниже.

данные json 0: совместная работа: 22 id: 26 производительность: 33 физическая: 44 планирование: 55 стратегия: 66 всего: 800

Я новичок в jscharts и javascript и до сих пор дошел. У меня есть данные на графике, но теперь график не отображается. 

async function getWaarde(){ 
    const api_url = 'https://scm-test.bettywebblocks.com/get-values'
    const response = await fetch(api_url); 
    const data = await response.json();
    const mydata = data;
    renderChart(data);
};
  
getWaarde();

function renderChart(data){
    console.log(data);
 
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
     labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
     datasets: [{
     label: '# of Votes',
     data: data[0],
     backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(255, 206, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
    ],
    borderWidth: 1
    }]
  },
     options: {
      maintainAspectRatio: false,
   }
 });
}
<div width="600" height="600">
  <canvas id="myChart" width="500" height="500"></canvas>
</div>

Я хотел бы получить данные в диаграмму, однако я получаю эту ошибку: 

Chart.min.js:7 Uncaught (in promise) TypeError: Cannot read property 'hidden' of undefined
at Chart.min.js:7
at Object.each (Chart.min.js:7)
at Chart.min.js:7
at Object.each (Chart.min.js:7)
at i.determineDataLimits (Chart.min.js:7)
at i.update (Chart.min.js:7)
at Chart.min.js:7
at Object.each (Chart.min.js:7)
at Object.update (Chart.min.js:7)
at ni.updateLayout (Chart.min.js:7)
...