我有问题创建我的Highcharts图表我的csv数据。我有下面的代码，似乎它应该工作，但它在我的服务器上产生一个空白的图形，我认为这与我拉我的数据的方式有关。我使用ajax请求从csv文件中提取并绘制点。我的csv格式是这样的。
0,0,0,12:45:37
5,26,130,12:45:37
1,28,28,12:45:42
4,35,140,12:45:47
1,32,32,12:45:52
3,16,48,12:45:57
1,29,29,12:46:02
1,25,25,12:46:07
5,16,80,12:46:12
4,35,140,12:46:17
5,25,125,12:46:22
4,37,148,12:46:27
每30秒将新的点添加到csv文件中
这是生成空白图形的代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Load cells data</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" 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>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var t = [];
var Cell1 = [];
var Cell2 = [];
var Cell3 = [];
$.get('test.csv',function(data) {
var lines = data.split('n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var date = items[0].split('/');
Cell1.push([date, parseFloat(items[1])]);
Cell2.push([date, parseFloat(items[2])]);
Cell3.push([date, parseFloat(items[0])]);
});
var options = {
chart: {
zoomType: 'x',
renderTo: 'chart',
defaultSeriesType: 'line',
animation: Highcharts.svg,
events: {
load: requestData
}
},
title: {
text: 'Reading chart'
},
xAxis: {
title: {
text: 'Date'
},
type: 'datetime'
},
yAxis: {
title: {
text: 'kN'
}
},
series: [{
data: Cell1},{data: Cell2
}, {data: Cell3}],
//barra vertical que une puntos
tooltip: {
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
x3: 0,
y3: 2
},
stops: [
[0, 'rgba(96, 96, 96, .8)'],
[1, 'rgba(16, 16, 16, .8)'],
[2, 'rgba(50, 50, 50, .8)']
]
},
borderWidth: 0,
style: {
color: '#FFF'
},
crosshairs: true,
shared: true
},
// quitar link Highcharts
credits: {
position: {
align: 'left',
verticalAlign: 'bottom',
x: 0,
y: -10
},
style: {
cursor: 'pointer',
fontSize: '20px',
color: 'rgba(0, 0, 0, 0)'
},
text: 'R E M t i m er.com',
href: 'http://Google.com'
},
// finn quitar link highcharts
};
var chart = new Highcharts.StockChart(options);
function requestData() {
$.ajax({
csv: '\server\test.csv',
success: function(csv) {
var items = csv.split(',');
var date = items[0].split('/');
Cell1 = parseFloat(items[1]),
Cell2 = parseFloat(items[2]),
Cell3 = parseFloat(items[3]),
point = [date, Cell1];
point2 = [date, Cell2];
point3 = [date, Cell3];
chart.series[0].addPoint(point);
chart.series[1].addPoint(point2)
chart.series[2].addPoint(point3)
// call it again after one second
setTimeout(requestData, 30000);
},
cache: false
});
}
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="chart" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
请帮助。
您需要将日期作为时间戳。
由于csv日期不包含日期，我建议放入当前日期(但请检查您的要求)。
试试这个(基于ISO 8601格式的字符串创建一个新的日期):
var date = new Date(new Date().toISOString().substr(0,10) + 'T' + items[3])