使用JS获取csv文件并在图表Js中显示数据
我有本地 cvs 文件，我尝试获取数据并将它们显示在图表 Js 中，但我无法读取此数据。这是代码
enter code here
** ``` const xlabel=[]; 常量 ytemp=[]; 图表（）；
async function chartIt(){
await getDatach();
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels:xlabel,
datasets: [{
label: 'some data',
data: ytemp,
fill:false,
backgroundColor: 'rgba(255, 99, 132, 0.2)' ,
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
}
});
}
async function getDatach(){
const response = await fetch('ZonAnn.Ts+dSST.csv');
const data=await response.text();
const rows=data.split('\n').slice(1);
table.forEach(row => {
const columns=elt.split(',');
const year=columns[0];
xlabel.push(year);
const temp=columns[1];
ytemp.push( parseFloat (temp)+14);
Console.log(year,temp);
});
}
**
慕田峪91588501回答
-
白猪掌柜的
我通过使用实时服务器解决了这个问题<html> <head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script> </head> <body> <canvas id="myChart" width="400" height="200"></canvas> <script> const xlabel=[]; const ytemp=[]; chartIt(); async function chartIt(){ await getDatach(); const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'line', data: { labels:xlabel, datasets: [{ label: 'some data', data: ytemp, fill:false, backgroundColor: 'rgba(255, 99, 132, 0.2)' , borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 1 }] } }); } async function getDatach(){ const response = await fetch('ZonAnn.Ts+dSST.csv'); const data=await response.text(); const table=data.split('\n').slice(1); table.forEach(row => { const columns=row.split(','); const year=columns[0]; xlabel.push(year); const temp=columns[1]; ytemp.push( parseFloat (temp)+14); }); } </script> </body></html>
随时随地看视频慕课网APP
相关分类
JavaScript