график. js с данными json и jquery - ошибка :-( - PullRequest
Новая
       9

график. js с данными json и jquery - ошибка :-(

1 голос
/ 14 апреля 2020

Я пытаюсь визуализировать данные измерений в формате json. Посмотреть мой текущий тест на https://www.andreas-weller.de/visu/index.html. Но, к сожалению, это просто не работает: на консоли нет ошибки, но диаграмма пуста.

Вот мой код: 

<!doctype html>
<html>

<head>
    <title>Line Chart</title>

</head>
<body>
<div style="width:75%;">
        <canvas id="myChart"></canvas>
</div>
<script src="./jquery-3.4.1.min.js"></script>
<script src="./Chart.min.js"></script>
<script>

$.getJSON('https://www.andreas-weller.de/visu/data.json', function(data) {

   var labels = data.chartData.data[0].map(function(e) {
      return e[0];
   });
   var data = data.chartData.data[0].map(function(e) {
      return e[1];
   });

   var ctx = document.getElementById('myChart').getContext('2d');
   var chart = new Chart(ctx, {
      type: 'line',
      data: {
         labels: labels,
         datasets: [{
            backgroundColor: 'rgb(129, 198, 2228)',
            borderColor: 'rgb(0, 150, 215)',
            data: data
         }]
      },
      options: {
         responsive: 'true',
      }
   });
});

</script></body></html>

1 Ответ

0 голосов
/ 14 апреля 2020

Согласно вашему API вы получаете этот объект: 

{
...,

  "data":[[1586736000000,0],[1586736900000,null]...]

...,
}

, когда вы делаете это: 

var labels = data.chartData.data[0].map(...)

Вы нацеливаетесь на первый массив данных. Что [1586736000000,0].

Таким образом, чтобы решить вашу проблему, вы можете просто сделать это так: 

var labels = data.chartData.data.map(function(e) {
  return e[0];
});

var data = data.chartData.data.map(function(e) {
  return e[1];
});

labels вернется: [1586736000000,1586736900000,...]

data вернется: [0,null,...]

Также, чтобы не go проходить через один и тот же массив дважды, вы можете предпочесть использовать forEach.

...