javascript - 如何转换变化的数据以在 chart.js 中可视化

Question

我正在使用 url 来获取不断更新和更改的数据。它以这样的数组形式返回:

[[0,14],[1,11],[2,15],[3,12],[4,8],[5,8],[6,9],[ 7,9],[8,9],[9,7]]。

我希望对其进行转换，以便我可以在 chart.js

中使用它

我想我应该把它转换成一个json文件，但不知道它是如何工作的，因为fetch需要每5秒初始化一次，并且每次都必须将新数据放入json文件然后显示在 chart.js 中。

我在 updatingArray[] 中获得了数据，但我现在卡住了。

function getDataFromDatapointsUrl(){
const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = 'https://canvasjs.com/services/data/datapoints.php)';

fetch(proxyurl + url)
.then(response => response.text())
.then(contents => createArrayForUpdatingData(contents));
    }

getDataFromDatapointsUrl();

// setInterval(getDataFromDatapointsUrl, 500);
var updatingDataArray = [];

function createArrayForUpdatingData(updatingData){
    updatingDataArray.push(updatingData);
}

我希望数组中的数据在图表中拆分。

[[0,14],[1,11],[2,15],[3,12],[4,8],[5,8],[6,9],[ 7,9],[8,9],[9,7]]。

所以 0,1,2,3,4,5,6,... 应该成为 x 轴，而 14,11,15, ... 应该成为值图表线、条形图、饼图，任何您喜欢的可视化形式。

Answer 1

根据您的示例，您可以简单地迭代 updatingDataArray 并将每个值推送到一个单独的数组，然后将其传递给 Chart.js:

var updatingDataArray = [
  [0, 14],
  [1, 11],
  [2, 15],
  [3, 12],
  [4, 8],
  [5, 8],
  [6, 9],
  [7, 9],
  [8, 9],
  [9, 7]
];

var labels = [],
  values = [];

updatingDataArray.forEach(function(val, idx) {
  labels.push(val[0]);
  values.push(val[1]);
});

new Chart(document.getElementById("chart"), {
  type: "line",
  data: {
    labels: labels,
    datasets: [{
      data: values
    }]
  },
  options: {}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="chart"></canvas>