您已经创建了'data.csv'文件,现在我想使用该data.csv文件的内容创建一个高图。我的csv文件的内容是:
2011-08-01 00:00:00,155
2011-08-02 00:00:00,156
2011-08-03 00:00:00,157
2011-08-03 00:00:00,160
现在我已经编写了一个javascript代码来渲染数据并创建一个高图,但它在我的网页上没有显示任何内容。我的代码是
$(document).ready(function() {
var options = {
chart: {
renderTo: 'chart',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'reading',
x: -20 //center
},
xAxis: {
title: {
text: 'Date Measurement'
},
categories: []
},
yAxis: {
title: {
text: 'reading'
}
},
series: []
};
$.get('C:/Program Files (x86)/Zend/Apache2/htdocs/myproject/public/data.csv', function(data) {
// Split the lines using newline '\n' as delimiter
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
// split the line elements using comma ',' as delimiter
var items = line.split(',');
$.each (items, function(itemNo, item) {
if(itemNo == 0)
options.xAxis.categories.push(item);
else if(itemNo > 0) {
var series = {
data: []
};
series.data.push(parseFloat(item));
};
options.series.push(series);
});
var chart = new HighCharts.Chart(options);
});
});
});
我不知道我做错了什么。任何帮助都会很棒。感谢。
答案 0 :(得分:1)
你需要处理你的Javascript,特别是如果你想做一些Highcharts。
步骤是 -
准备您的数据。
创建选项对象。
渲染图表。
如果您将data.csv
文件放在与html file
相同的目录中,则以下代码有效。
$(document).ready(function() {
var c = [];
var d = [];
$.get('data.csv', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
c.push(items[0]);
d.push(parseInt(items[1]));
});
});
var options = {
chart: {
renderTo: 'chart',
defaultSeriesType: 'line'
},
title: {
text: 'reading'
},
xAxis: {
title: {
text: 'Date Measurement'
},
categories: c
},
yAxis: {
title: {
text: 'reading'
}
},
series: [{
data: d
}]
};
var chart = new Highcharts.Chart(options);
});