我需要的任何格式创建从输入文件中的图表。我写了一些代码段卡在某处。
这是使用JavaScript，HTML，CSS。使用某些功能和事件侦听器，试图与任务的50％，努力为剩余部分的代码来完成。
<!DOCTYPE html>
<html>
<body>
<input type="file" id="files" name="file" />
<div id="container" style="height: 500px; min-width: 500px"></div>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script>
function Handleselectedfile(fobj)
{
var files = fobj.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++)
{
var reader = new FileReader();
reader.onload = function(event)
{
// NOTE: event.target point to FileReader
var contents = event.target.result;
lines = contents.split('\n',);
console.log(contents)
console.log(lines)
//////
document.getElementById('container').innerHTML=contents;
return lines
};
reader.readAsText(f);
}
}
document.getElementById('files').addEventListener('change', Handleselectedfile, false);
var result = Handleselectedfile(fobj);
document.write(result);
</script>
</body>
</html>
我想用的功能的结果来创建图“Handleselectedfile（fobj）”
在完成了JavaScript的课程后，“YouTube”的我写了使用的代码
“的addEventListener”， “的FileReader”， “的onload”， “包括”， “推”， “对” 和 “if” 语句。对于图我用chart.js之工具
**
**
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="D:\HTML\SOURCE_CODE\Chart.min.js"></script>
<title>My Chart.js Chart</title>
</head>
<body>
<input type="file" id="files" name="file" />
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script>
var labels_x=[]
var labels_y=[]
function Handleselectedfile(fobj)
{
var files = fobj.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++)
{
var reader = new FileReader();
reader.onload = function(event)
{
// NOTE: event.target point to FileReader
var contents = event.target.result;
var lines = contents.split('\n');
//////////
console.log(contents)
console.log(typeof(Object.values(lines)))
console.log(lines.length)
console.log(lines)
for(i=0;i<lines.length;i++){
if(lines[i].includes(",")){
var arr = lines[i].split(',');
}else{
var arr = lines[i].split(' ');
}
console.log(arr[0])
console.log(JSON.parse(lines));
console.log(arr)
console.log(typeof(arr))
labels_x.push(arr[0])
labels_y.push(arr[1])
}
//////////////////////////////////////////////////////////////////////////////////
let myChart = document.getElementById('myChart').getContext('2d');
// Global Options
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = '#777';
let massPopChart = new Chart(myChart, {
type:'line', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
data:{
labels:labels_x,
datasets:[{
label:'population',
data:labels_y,
//backgroundColor:'green',
backgroundColor:[
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(255, 159, 64, 0.6)',
'rgba(255, 99, 132, 0.6)'
],
borderWidth:1,
borderColor:'#777',
hoverBorderWidth:3,
hoverBorderColor:'#000'
}]
},
options:{
title:{
display:false,
text:'Largest Polluted Cities',
fontSize:25
},
legend:{
display:false,
position:'right',
labels:{
fontColor:'#000'
}
},
layout:{
padding:{
left:50,
right:0,
bottom:0,
top:0
}
},
tooltips:{
enabled:true
}
}
});
///////////////////////////////////////////////////////////////////////////////////////////////
};
reader.readAsText(f);
}
}
document.getElementById('files').addEventListener('change', Handleselectedfile, false);
</script>
</body>
</html>