javascript - 如何使用不同数量的 x(标签)和 y(数据)点将数据正确地馈送到 ChartJS

Question

我有一个数据集，其中包含类似这样的数据

var data =[10,30,20,50,80,60,120,40,20,90,30,10];
var labels = [moment("12:00:00", 'HH:mm:ss'),moment("12:00:01", 'HH:mm:ss'),moment("12:00:02", 'HH:mm:ss'),moment("12:00:03", 'HH:mm:ss')]; 

我像这样将数据提供给 chartJS

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: labels,
      datasets: [{
         label: 'Voltage Fluctuation',
         data: [10,20,30,40,50],
         borderWidth: 1
      }]
   },
   options: {
      scales: {
         xAxes: [{
            type: 'time',
            time: {
               unit: 'minute',
               displayFormats: {
                  hour: 'HH:mm:ss'
               }
            }
         }]
      },
   }
});

但是，我只获取前四个点的数据，即每个标签的数据。

这是 JSFiddle

我希望为所有标签分配数据，在本例中，每 (4/12) 秒分配一个数据点，并相应地调整图形。

是否有任何可能的方法可以通过将标签转换为毫秒格式来实现这一点而无需对其进行硬编码？

Answer 1

为了创建等长的数组，我继续对整个事情进行了硬编码，将秒切成毫秒数