Диаграмма js как вставить значения из json - PullRequest
Новая
       8

Диаграмма js как вставить значения из json

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

У меня проблема со вставкой в ​​диаграмму. js только двух значений (временная метка и телеметрия процессора) из внешнего JSON (который удаленно расположен на VPS). В консоли все данные загружены правильно, мой код: 

var theCpuUrl = "http://" + address + "/api/metric/cpu";
var xmlhttp = new XMLHttpRequest();
var ctx = document.getElementById('cpuchart').getContext('2d');

var cpuchart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: '......',
    datasets: [{
      label: 'cpu',
      data: [80, 70, 80, 20, 10, 50],
      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: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: false
          }
        }]
      }
    }
  }
});

httpGetAsync(theCpuUrl, function(data, status) {
  var myData = JSON.parse(data);
  for (var i = 0; i < myData[0].length; i++) {
    let time = myData[0][i].timestamp;
    let value = myData[0][i].cpu;
  }
});
xmlhttp.open("GET", theCpuUrl, true);
console.log(xmlhttp.readyState);

Этот код также связан с global.js с помощью следующего кода: 

var address = "192.168.13.60:12345"

function httpGetAsync(theUrl, callback) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
      callback(xmlHttp.responseText);
  }
  xmlHttp.open("GET", theUrl, true);
  xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "*");
  xmlHttp.send(null);
}

Пожалуйста, кто-нибудь может объяснить, как мне Я рисую данные по оси Y и X. Большое спасибо.

1 Ответ

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

Добро пожаловать в Stackoverflow. Проблема возникает потому, что вы сначала инициализировали диаграмму new Chart, и вы получаете обновленные значения асинхронно. Вы можете решить эту проблему, инициализировав диаграмму после получения данных.

например 

httpGetAsync(theCpuUrl, function(data, status) {
  var myData = JSON.parse(data);
   // storing time and values 
   let time=[], value=[];
   for (var i = 0; i < myData[0].length; i++) {
     time.push(myData[0][i].timestamp);
     value.push(myData[0][i].cpu);
   }
   // now you have data in time and value array ready
   --> here call the "new Chart" which you're calling above. <--
});
...