Chart.js如何从json中插入值?

我有一个问题,在Chart.js中只插入了两个来自外部JSON(位于VPS上的远程)的值(时间戳和cpu遥测)。在Console中,所有的数据都正确加载,我的代码是。

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);
}

Please somebody can you explain me how do I draw data on Y and X axis.Thank you very much.

解决方案:

欢迎来到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. <--
});

给TA打赏
共{{data.count}}人
人已打赏
未分类

在关系数据库中使用用户定义的组件存储实体。

2022-9-13 13:45:33

未分类

Vue复选框没有随着数据变化而更新

2022-9-13 13:45:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索