我有一个名为
data.csvdata.csvtime,voltage
0.0,20
0.2,1
0.3,15
0.4,2
0.5,31
0.6,11
我想根据此 CSV 数据创建 JavaScript 数据结构并将其存储在变量中。所需的数据结构应如下所示：
所需的数据结构：
[
{ x: 0.0, y: 20 },
{ x: 0.2, y: 1 },
{ x: 0.3, y: 15 },
{ x: 0.4, y: 2 },
{ x: 0.5, y: 31 },
{ x: 0.6, y: 11 }
]
如何在 JavaScript 中实现此目的？
我特别需要这个数据结构来使用
chart.jschart.js<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="chart" width="1920" height="1080"></canvas>
<script>
const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
yAxisID: 'yA',
label: 'Temperature',
data: [
{ x: 0.05, y: 12 },
{ x: 0.15, y: 19 },
{ x: 0.25, y: 3 },
{ x: 0.35, y: 5 },
{ x: 0.45, y: 2 },
{ x: 0.55, y: 3 },
],
},
{
yAxisID: 'yB',
label: 'Voltage',
data: [
{ x: 0.0, y: 20 },
{ x: 0.2, y: 1 },
{ x: 0.3, y: 15 },
{ x: 0.4, y: 2 },
{ x: 0.5, y: 31 },
{ x: 0.6, y: 11 },
],
}
]
},
options: {
responsive: true,
scales: {
yA: {
type: 'linear',
position: 'left',
ticks: { beginAtZero: true, color: 'blue' },
grid: { display: false },
borderWidth: 1,
pointStyle: 'circle',
//backgroundColor: 'blue',
borderColor: 'blue',
tension: 0,
},
yB: {
type: 'linear',
position: 'left',
ticks: { beginAtZero: true, color: 'green' },
grid: { display: false },
borderWidth: 1,
pointStyle: 'circle',
//backgroundColor: 'green',
borderColor: 'green',
tension: 0,
},
x: {
ticks: { beginAtZero: true },
type: 'linear',
}
}
}
});
</script>
</body>
</html>一个简单的解决方案是使用
fetchfunction renderChar(csv){
let textLines = csv.split(/\r?\n/).slice(1); // -> remove the header
// -> this crete the json object
let jsonData = textLines.map( line => {
let [x,y] = line.split(',').map( x => parseFloat(x));
return { x, y}
})
console.log(jsonData);
// -> Here you would create the Chart
}
// -> load the data.txt
fetch('data.txt').then( res => res.text()).then( renderChar );
尽管如此，如果您可以在服务器上而不是在客户端上准备 json 数据，这将提高性能和加载时间。