如何使用json提供的数据更新Chart.js?

时间:2019-04-10 13:31:55

标签: javascript json ajax chart.js

我正在尝试绘制此json提供的数据,但它根本没有更新。

这是json:

{
  "t1": {
    "temps": "1850,1875,1900,1931,1956,1987,2000,2018,2031,2043,2100",
    "times": "2019-04-10 13:27:09,2019-04-10 13:32:09,2019-04-10 13:37:10,2019-04-10 13:42:10,2019-04-10 13:47:12,2019-04-10 13:52:13,2019-04-10 13:57:13,2019-04-10 14:02:14,2019-04-10 14:07:14,2019-04-10 14:12:15,2019-04-10 14:29:52"
  },
  "t10": {
    "temps": "1843,1868,1900,1925,1950,1975,1993,2012,2300",
    "times": "2019-04-10 13:27:09,2019-04-10 13:32:09,2019-04-10 13:37:10,2019-04-10 13:42:10,2019-04-10 13:47:12,2019-04-10 13:52:13,2019-04-10 13:57:13,2019-04-10 14:02:14,2019-04-10 14:29:52"
  },
  "t2": {
    "temps": "2131",
    "times": "2019-04-10 14:29:52"
  },
  "t3": {
    "temps": "1856,1881,1906,1931,2131",
    "times": "2019-04-10 13:27:09,2019-04-10 13:32:09,2019-04-10 13:37:10,2019-04-10 13:42:10,2019-04-10 14:29:52"
  },
  "t4": {
    "temps": "2125",
    "times": "2019-04-10 14:29:52"
  },
  "t5": {
    "temps": "2118",
    "times": "2019-04-10 14:29:52"
  },
  "t6": {
    "temps": "2075",
    "times": "2019-04-10 14:29:52"
  },
  "t7": {
    "temps": "2137",
    "times": "2019-04-10 14:29:52"
  },
  "t8": {
    "temps": "2112",
    "times": "2019-04-10 14:29:52"
  },
  "t9": {
    "temps": "2100",
    "times": "2019-04-10 14:29:52"
  }
}

我想要每个tX的折线图。 我尝试了以下代码:

var ctx = document.getElementById('myChart').getContext('2d');
var dataResult = [1,2,3,4,5];
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['-40min', '-30min', '-20min', '-10min', '-5min', '0'],
        datasets: [
            {
                data: dataResult,
                backgroundColor: [
                    'rgba(0, 0, 0, 0.05)'
                ],
                borderColor: [
                    'rgba(0, 0, 0, 0.3)'
                ],
                borderWidth: 2
            }
        ]
    },
    options: {
        responsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

var getData = function() {
    $.ajax({
        url: 'https://www.example.com/get.php?chart=true',
        dataType: "json",
        success: function(data) {

            myChart.data.datasets.forEach((data) => {
                var nums = data.temps;
                nums = nums.split(',').map(Number);
                myChart.datasets.data.push(nums);
            });
            myChart.update();
        }
    });
}

setInterval(getData, 10000);

为什么不更新图表?我确实看到了1,2,3,4,5的测试数据,但是tX的每个数据的新值并未添加到图表中。似乎我在遍历每个tX错误,但是我看不出我还能怎么做。

0 个答案:

没有答案