如何在 chart.js 中创建时间序列折线图？

Question

我创建了一个 python 脚本，它从 API 获取数据以获取特定时间的天气温度

结果是一个 CSV 文件，如下所示：

Time,Temperature
2020-02-15 18:37:39,-8.25
2020-02-15 19:07:39,-8.08
2020-02-15 19:37:39,-8.41
2020-02-15 20:07:39,-8.2

如何将 CSV 转换为 JavaScript 数组并从中制作 Chart.js 折线图？

现在，我有一个 Chart.js 基本脚本，看起来像这样（没有填充任何数据）

new Chart(document.getElementById("line-chart"), {
type: 'line',
 data: {
   labels: [],
   datasets: [{ 
       data: [],
       label: "Temperature",
       borderColor: "#3e95cd",
       fill: false
     } 
   ]
 },
 options: {
   scales: {
     xAxes: [{
       type: 'time',
       distribution: 'linear',
     }],
   title: {
     display: false,
   }
   }
 }
});

Answer 1

基本上，转换每个文件行字符串：

2020-02-15 18:37:39,-8.25 

成一个对象：

{x: "2020-02-15 18:37:39", y: -8.25}

存储在 Chart.jsdata : []数组中。

这是一个关于如何创建一个csvToChartData()返回这样一个数组的函数的例子（使用如下：... data: csvToChartData(csv)）

• 通过换行符 将文件字符串修剪并拆分\n为lines数组。
• 使用删除标题（第一个数组键）lines.shift();
• 通过用逗号分割每一行，将每一行 转换为一个对象{x: date, y: temperature}.split(',')
• 将新映射的 Array（通过使用.map()）作为您的图表传递data:

2020-02-15 18:37:39,-8.25 

{x: "2020-02-15 18:37:39", y: -8.25}

const csv = `Time,Temperature
2020-02-15 18:37:39,-8.25
2020-02-15 19:07:39,-8.08
2020-02-15 19:37:39,-8.41
2020-02-15 20:07:39,-8.2`;

const csvToChartData = csv => {
  const lines = csv.trim().split('\n');
  lines.shift(); // remove titles (first line)
  return lines.map(line => {
    const [date, temperature] = line.split(',');
    return {
      x: date,
      y: temperature
    }
  });
};

const ctx = document.querySelector("#line-chart").getContext('2d');
const config = {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
      data: csvToChartData(csv),
      label: "Temperature",
      borderColor: "#3e95cd",
      fill: false
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        distribution: 'linear',
      }],
      title: {
        display: false,
      }
    }
  }
};
new Chart(ctx, config);

动态获取数据：

要动态获取数据，例如每 5 秒一次，您可以使用 AJAX 和Fetch API。
这是修改后的 JS 示例，假设您有一个名为的 CSV 文件temperature.csv

#line-chart {
  display: block;
  width: 100%;
}