【发布时间】：2014-06-04 15:49:10
【问题描述】：
大家好，这是我的第一篇文章，但我是 Stack Overflow 以前解决方案的狂热用户，如果我能找到答案，我不会发布它。
我正在使用以下使用高图表事件->加载功能根据需要更新 12 个数据点，在我的情况下是每分钟一次。我只是想知道我在这段代码中做错了什么。
graphpage.html：
<script src='scripts/jquery-latest.js'></script>
<script src='scripts/highcharts.js'></script>
<div class="col-sm-12 col-lg-12">
<div class="graph-unit">
<dtitle>Other Information</dtitle>
<hr>
<div class="section-graph">
<div id="active_power_container"></div>
</div>
</div>
<script src="scripts/getgraphdata.php"></script>
getgraphdata.php:
<?
require_once 'datastuff.php';
header('Content-Type: text/javascript');
?>
var collector_id='<?=$db->currentUser?>';
var meter_id=3;
var samples=60;
var mod=2;
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'active_power_container',
defaultSeriesType: 'line',
events: {
load: function() {
var date,
series1 = this.series[0],
series2 = this.series[1],
series3 = this.series[2],
series4 = this.series[3],
series5 = this.series[4],
series6 = this.series[5],
series7 = this.series[6],
series8 = this.series[7],
series9 = this.series[8],
series10 = this.series[9],
series11 = this.series[10],
series12 = this.series[11],
$sQry = '/i/data/graph_widget_data.php?collector_id='+collector_id+'&limit=1';
setInterval(function() {
$.get($sQry , null, function(tsv) {
tsv = tsv.split(/\n/g);
$.each(tsv, function(i, line) {
line = line.split(/\t/);
var date = line[0];
series1.addPoint([date, line[1]], true, true);
series2.addPoint([date, line[2]], true, true);
series3.addPoint([date, line[3]], true, true);
series4.addPoint([date, line[4]], true, true);
series5.addPoint([date, line[5]], true, true);
series6.addPoint([date, line[6]], true, true);
series7.addPoint([date, line[7]], true, true);
series8.addPoint([date, line[8]], true, true);
series9.addPoint([date, line[9]], true, true);
series10.addPoint([date, line[10]], true, true);
series11.addPoint([date, line[11]], true, true);
series12.addPoint([date, line[12]], true, true);
});
});
}, 1000);
}
}
},
credits: {
enabled: false
},
title: {
text: 'Active Power chart (meter: '+meter_id+')',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
hour: '%I %p',
minute: '%I:%M %p'
}
},
yAxis: {
title: {
text: 'Active Power (Watts) '
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [<? $query = $db->DB("SELECT long_description,short_description FROM `desc_tbl` WHERE `id` = '{$db->getdata(3)}'");
$num_rows = $query->num_rows;
$i = 1;
while($row = $query->fetch_assoc()){
$title = $row['short_description'];
if($title == ""){ $title = $row['long_description']; }
?>{
name: '<?=$title?>'
}<? if($i < $num_rows){echo ","; $i++; } }?>]
}
sQry= '/i/data/graph_widget_data.php?collector_id='+collector_id+'&meter_id='+parseInt(meter_id)+'&samples='+parseInt(samples)+'&mod='+parseInt(mod);
jQuery.get(sQry , null, function(tsv) {
var lines = [];
traffic = [];
traffic1 = [];
traffic2 = [];
traffic3 = [];
traffic4 = [];
traffic5 = [];
traffic6 = [];
traffic7 = [];
traffic8 = [];
traffic9 = [];
traffic10 = [];
traffic11 = [];
try {
// split the data return into lines and parse them
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function(i, line) {
line = line.split(/\t/);
//date = Date.parse(line[0] +' UTC');
date = line[0];
traffic.push([
parseInt(date),
parseFloat(line[1].replace(',', ''))
]);
traffic1.push([
parseInt(date),
parseFloat(line[2].replace(',', ''))
]);
traffic2.push([
parseInt(date),
parseFloat(line[3].replace(',', ''))
]);
traffic3.push([
parseInt(date),
parseFloat(line[4].replace(',', ''))
]);
traffic4.push([
parseInt(date),
parseFloat(line[5].replace(',', ''))
]);
traffic5.push([
parseInt(date),
parseFloat(line[6].replace(',', ''))
]);
traffic6.push([
parseInt(date),
parseFloat(line[7].replace(',', ''))
]);
traffic7.push([
parseInt(date),
parseFloat(line[8].replace(',', ''))
]);
traffic8.push([
parseInt(date),
parseFloat(line[9].replace(',', ''))
]);
traffic9.push([
parseInt(date),
parseFloat(line[10].replace(',', ''))
]);
traffic10.push([
parseInt(date),
parseFloat(line[11].replace(',', ''))
]);
traffic11.push([
parseInt(date),
parseFloat(line[12].replace(',', ''))
]);
});
} catch (e) { }
options.series[0].data = traffic;
options.series[1].data = traffic1;
options.series[2].data = traffic2;
options.series[3].data = traffic3;
options.series[4].data = traffic4;
options.series[5].data = traffic5;
options.series[6].data = traffic6;
options.series[7].data = traffic7;
options.series[8].data = traffic8;
options.series[9].data = traffic9;
options.series[10].data = traffic10;
options.series[11].data = traffic11;
chart = new Highcharts.Chart(options);
});
});
sQry 输出如下一行：
1401896202400 0 0 0 0 0 97 0 0 0 0 0 0
这很好，因为它正在获取最新的查询，但它对它没有任何作用。 当我删除事件->加载东西时它工作正常，我似乎无法确定我的错误。任何帮助将不胜感激:)
谢谢。
【问题讨论】：
标签： javascript php jquery highcharts multiple-columns