1
今天我花了很多时间学习JavaScript和HighCharts。我试图让这个图表显示。我设法让JSON正常工作,但我更愿意让CSV工作,因为我的所有文件都是CSV格式。我经历了很多JavaScript调试器,并看到我的数据正确保存,但数据并未绘制。轴和标题显示。附件是我的代码。预先感谢您的帮助。无论出于何种原因,的jsfiddle不起作用可以随意看看我的意思是在:www.teratuple.com/data/dataVolume.htmlHighcharts在从CSV文件读取时不显示数据但绘制图表
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<body>
<div id = "container" style = "width:100%; height:400px;"></div>
<script>
var seriesData = [];
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 1 // all
},
xAxis: {
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Volume (mm3)'
}
},
title: {
text: 'Volume Differential'
},
series: [{
data: [],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b><br/>',
valueDecimals: 2
}
}]
};
$.get('www.teratuple.com/data/volumeData.csv', function (data) {
var lines = data.split('\n');
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if (lineNo > 0) {
seriesData.push([parseInt(items[0]), parseFloat(items[1])]);
}
});
options.series.data = seriesData;
chart = new Highcharts.StockChart(options);
});
});
</script>
</body>
</html>
设置你的序列数据哈哈非常感谢你!我花了几个小时试图调试这个,它通常是这样的小东西。再次感谢! – PhillipAMann 2014-10-20 05:18:56
它现在的作品,但它并没有画出线!哦,一个问题倒了。向前走到下一个... – PhillipAMann 2014-10-20 06:25:09
对不起,发送垃圾邮件。我想到了。由CSV读入的最后一个元素是两个NaN值。如果我把它们分开,它就完美了。我需要弄清楚为什么CSV没有正确读取。 – PhillipAMann 2014-10-20 06:38:02