Javascript 将Csv文件加载到highcharts中的文件
我正在highcharts中绘制Csv列数据。而不是:Javascript 将Csv文件加载到highcharts中的文件,javascript,csv,highcharts,Javascript,Csv,Highcharts,我正在highcharts中绘制Csv列数据。而不是: $.get('5.csv', function(data) 我想使用以下方式输入本地桌面Csv文件: function handleFileSelect(evt) { var files = evt.target.files; // FileList object 我当前的Javascript代码如下: var options = { chart: { renderTo: 'container', defaultSeri
$.get('5.csv', function(data)
我想使用以下方式输入本地桌面Csv文件:
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
我当前的Javascript代码如下:
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'Test'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Units',
}
},
series: []
};
// $.get('5.csv', function(data) {
var file = event.target.file;
var reader = new FileReader();
var txt=reader.readAsText(file);
var lines = txt.split('\n');
var c = [], d = [];
$.each(lines, function(lineNo, line) {
if(lineNo > 0 ){
var items = line.split(',');
var strTemp = items[0];
c = [parseFloat(items[0]), parseFloat(items[1])];
d.push(c);
console.log(c);
}
});
options.xAxis.categories = c;
options.series = [{
data: d
}];
chart = new Highcharts.Chart(options);
});
我该怎么做呢?我想从本地桌面计算机上载Csv文件。如何将文件读取器上传的文件链接到highcharts以进行绘图,而不是使用$.get(5.csv',函数(data){?还是使用jquery csv()更好。我知道存在浏览器安全问题。我的文件是3列Csv,带有一行标题,第1列是x轴,第2列是y轴,第3列是错误栏,我尚未实现:
Q,I,E
0.009,2.40E-01,5.67E-02
0.011,2.13E-01,3.83E-02
0.013,2.82E-01,2.28E-02
等等……现在可以通过文件API上传
function processFiles(files) {
var chart;
options = {
chart: {
zoomType: 'x',
renderTo: 'container',
type: 'line',
zoomType: 'x'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'linear',
minorTickInterval: 0.1,
title: {
text: 'Q'}
},
yAxis: {
type: 'linear',
minorTickInterval: 0.1,
title: {
text: 'I(ntensity)'
},
},
tooltip: {
shared: true
},
legend: {
enabled: true
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, Highcharts.getOptions().colors[0]],
[0, 'rgba(2,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
name: 'Series'}]
};
var file = files[0]
var reader = new FileReader();
reader.onload = function (e) {
str = e.target.result;
var lines = str.split("\n");
var c = [], d = [], er = [];
$.each(lines, function(lineNo, line) {
if(lineNo > 0 ){
var items = line.split(',');
var strTemp = items[0];
er = parseFloat(items[2])
a = parseFloat(items[0])
b = parseFloat(items[1])
min = (b - (er/2))
max = b + ((er/2))
c = [a , b];
var q = [], e = [];
q = [min, max]
e.push(q);
d.push(c);
console.log(c);
console.log(q);
}
});
options.xAxis.categories = c.name;
lineWidth: 1
options.series = [{
data: d,
type: 'scatter'
}, {
name: 'standard deviation',
type: 'errorbar',
color: 'black',
data : e }
];
$("#Linear").click(function(){
$('#container').highcharts().yAxis[0].update({ type: 'linear'});
});
$("#Log").click(function(){
$('#container').highcharts().yAxis[0].update({ type: 'logarithmic'});
});
$("#Guinier").click(function(){
$('#container').highcharts().yAxis[0].update({ data: Math.log(d)});
options.xAxis.categories = c.name;
lineWidth: 1
options.series = [{
data: d
}]
});
chart = new Highcharts.Chart(options);
}
reader.readAsText(file)
var output = document.getElementById("fileOutput")
};
由于安全原因,您不能直接在客户端加载文件 为此,您需要使用HTML5文件API,该API将为用户提供一个选择文件的文件对话框 如果您计划使用jquery csv,这里有一个示例演示如何做到这一点
作为替代方案,如果jquery csv不能满足您的需求,也很好。我不理解您的问题。您的图表工作正常?“我想输入一个本地csv文件”,什么是本地csv文件?这是客户端上的csv文件吗?您是否希望使用HTML5文件阅读器()?您的CSV是什么样子的?在您的示例中,您推到带有点[0.009,2.40E-01]的类别数组,在类别中,它应该是单值数组,而不是对数组。对可以用于序列数据,正如您所理解的(这部分是正确的),Sebastian。是的,我想使用FileReader或类似的东西来获取文件。