我创建了一个 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,
}
}
}
});
最佳答案
基本上,转换 每一个文件行字符串 :
2020-02-15 18:37:39,-8.25
进入 对象 :
{x: "2020-02-15 18:37:39", y: -8.25}
存储在 Chart.js
data : []
中大批。这是一个关于如何创建函数的示例
csvToChartData()
返回这样一个数组(使用如下: ... data: csvToChartData(csv)
)\n
变成 lines
大批 。 lines.shift();
{x: date, y: temperature}
用逗号分隔每一行 .split(',')
.map()
)作为图表 传递data:
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);
#line-chart {
display: block;
width: 100%;
}
<canvas id="line-chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
动态获取数据:
要动态获取数据,例如 每 5 秒 ,您可以使用 AJAX 和 Fetch API .
这是修改后的 JS 示例,因为您有一个名为
temperature.csv
的 CSV 文件const config = {
type: "line",
data: {
labels: [],
datasets: [{
data: [], // Set initially to empty data
label: "Temperature",
borderColor: "#3e95cd",
fill: false
}]
},
options: {
scales: {
xAxes: [{
type: "time",
distribution: "linear"
}],
title: {
display: false
}
}
}
};
const ctx = document.querySelector("#line-chart").getContext("2d");
const temperatureChart = new Chart(ctx, config);
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 fetchCSV = () => fetch("temperature.csv")
.then(data => data.text())
.then(csv => {
temperatureChart.data.datasets[0].data = csvToChartData(csv);
temperatureChart.update();
setTimeout(fetchCSV, 5000); // Repeat every 5 sec
});
fetchCSV(); // First fetch!
关于javascript - 如何在 chart.js 中创建时间序列折线图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60244808/