Highcharts异步服务器加载多个系列
我正试图在其示例后使用延迟加载的Highcharts
http://www.highcharts.com/stock/demo/lazy-loading
和他们的PHP代码
https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
但我唯一得到的是2011年2天的空白空图表（示例数据）。 我的PHP代码：
<?php // get the parameters $callback = $_GET['callback']; if (!preg_match('/^[a-zA-Z0-9_]+$/', $callback)) { die('Invalid callback name'); } $start = $_GET['start']; if ($start && !preg_match('/^[0-9]+$/', $start)) { die("Invalid start parameter: $start"); } $end = $_GET['end']; if ($end && !preg_match('/^[0-9]+$/', $end)) { die("Invalid end parameter: $end"); } if (!$end) $end = mktime() * 1000; // connect to MySQL $link = mysqli_connect('localhost:3306', 'root', 'elektra','telegestione'); // set UTC+1 time //mysql_query("SET time_zone = '+01:00'"); // set some utility variables $range = $end - $start; //$startTime = gmstrftime('%Y-%m-%d %H:%M:%S', $start / 1000); $startTime= date('Ymd H:i:s', strtotime(gmstrftime('%Y-%m-%d %H:%M:%S', $start / 1000) . ' - 1 day')); //$endTime = gmstrftime('%Y-%m-%d %H:%M:%S', $end / 1000); $endTime= date('Ymd H:i:s', strtotime(gmstrftime('%Y-%m-%d %H:%M:%S', $end / 1000) . ' + 0 day')); // find the right table // two days range loads minute data if ($range t2.value AND t2.value>0 then abs(t1.value - t2.value) when t1.value>t2.value AND t2.value=0 then t2.value else t1.value END)kwhg, (case when t1.value1>t2.value1 AND t2.value1>0 then abs(t1.value1 - t2.value1) when t1.value1>t2.value1 AND t2.value1=0 then t2.value1 when t1.value1=t2.value1 AND t1.value1>0 then abs(t1.value1 - t2.value1) else 0 END) kwhc, (case when t1.value2>t2.value2 AND t2.value2>0 then abs(t1.value2 - t2.value2) when t1.value2>t2.value2 AND t2.value2=0 then t2.value2 when t1.value2=t2.value2 AND t1.value2>0 then abs(t1.value2 - t2.value2) else 0 END)kwhi, (case when t1.value3>t2.value3 AND t2.value3>0 then abs(t1.value3 - t2.value3) when t1.value3>t2.value3 AND t2.value3=0 then t2.value3 when t1.value3=t2.value3 AND t1.value3>0 then abs(t1.value3 - t2.value3) else 0 END) kwhfm FROM (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3 FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t1 JOIN (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3 FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t2 on t1.dt = t2.dt + interval 15 minute) as q1 JOIN (select dataora, AVG(Test) as test from temperature where dataora between '$startTime' and '$endTime' GROUP BY date(dataora),hour(dataora)) as q2 ON q1.time=q2.dataora"); //one week range loads hourly data } elseif ($range t2.value AND t2.value>0 then abs(t1.value - t2.value) when t1.value>t2.value AND t2.value=0 then t2.value else t1.value END)kwhg, (case when t1.value1>t2.value1 AND t2.value1>0 then abs(t1.value1 - t2.value1) when t1.value1>t2.value1 AND t2.value1=0 then t2.value1 when t1.value1=t2.value1 AND t1.value1>0 then abs(t1.value1 - t2.value1) else 0 END) kwhc, (case when t1.value2>t2.value2 AND t2.value2>0 then abs(t1.value2 - t2.value2) when t1.value2>t2.value2 AND t2.value2=0 then t2.value2 when t1.value2=t2.value2 AND t1.value2>0 then abs(t1.value2 - t2.value2) else 0 END)kwhi, (case when t1.value3>t2.value3 AND t2.value3>0 then abs(t1.value3 - t2.value3) when t1.value3>t2.value3 AND t2.value3=0 then t2.value3 when t1.value3=t2.value3 AND t1.value3>0 then abs(t1.value3 - t2.value3) else 0 END) kwhfm FROM (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3 FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t1 JOIN (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3 FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t2 on t1.dt = t2.dt + interval 1 hour) as q1 JOIN (select dataora, AVG(Test) as test from temperature where dataora between '$startTime' and '$endTime' GROUP BY date(dataora),hour(dataora)) as q2 ON q1.time=q2.dataora"); // one month range loads hourly data } elseif ($range t2.value AND t2.value>0 then abs(t1.value - t2.value) when t1.value>t2.value AND t2.value=0 then t2.value else t1.value END)kwhg, (case when t1.value1>t2.value1 AND t2.value1>0 then abs(t1.value1 - t2.value1) when t1.value1>t2.value1 AND t2.value1=0 then t2.value1 when t1.value1=t2.value1 AND t1.value1>0 then abs(t1.value1 - t2.value1) else 0 END) kwhc, (case when t1.value2>t2.value2 AND t2.value2>0 then abs(t1.value2 - t2.value2) when t1.value2>t2.value2 AND t2.value2=0 then t2.value2 when t1.value2=t2.value2 AND t1.value2>0 then abs(t1.value2 - t2.value2) else 0 END)kwhi, (case when t1.value3>t2.value3 AND t2.value3>0 then abs(t1.value3 - t2.value3) when t1.value3>t2.value3 AND t2.value3=0 then t2.value3 when t1.value3=t2.value3 AND t1.value3>0 then abs(t1.value3 - t2.value3) else 0 END) kwhfm FROM (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3 FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t1 JOIN (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3 FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t2 on t1.dt = t2.dt + interval 1 hour) as q1 JOIN (select dataora, AVG(Test) as test from temperature where dataora between '$startTime' and '$endTime' GROUP BY date(dataora),hour(dataora)) as q2 ON q1.time=q2.dataora"); // one year range loads daily data } elseif ($range t2.value AND t2.value>0 then abs(t1.value - t2.value) when t1.value>t2.value AND t2.value=0 then t2.value else t1.value END)kwhg, (case when t1.value1>t2.value1 AND t2.value1>0 then abs(t1.value1 - t2.value1) when t1.value1>t2.value1 AND t2.value1=0 then t2.value1 when t1.value1=t2.value1 AND t1.value1>0 then abs(t1.value1 - t2.value1) else 0 END) kwhc, (case when t1.value2>t2.value2 AND t2.value2>0 then abs(t1.value2 - t2.value2) when t1.value2>t2.value2 AND t2.value2=0 then t2.value2 when t1.value2=t2.value2 AND t1.value2>0 then abs(t1.value2 - t2.value2) else 0 END)kwhi, (case when t1.value3>t2.value3 AND t2.value3>0 then abs(t1.value3 - t2.value3) when t1.value3>t2.value3 AND t2.value3=0 then t2.value3 when t1.value3=t2.value3 AND t1.value3>0 then abs(t1.value3 - t2.value3) else 0 END) kwhfm FROM (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3 FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt)) t1 JOIN (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3 FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt)) t2 on t1.dt = t2.dt + interval 1 day) as q1 JOIN (select dataora, AVG(Test) as test from temperature where dataora between '$startTime' and '$endTime' GROUP BY date(dataora)) as q2 ON q1.time=q2.dataora"); // greater range loads monthly data } else { if (!$link) { die('Could not connect: ' . mysqli_error());}; echo "monthly data2" ; $result = mysqli_query($link,"select 1000*unix_timestamp(q1.time) as time, q1.kwhg, q1.kwhc, q1.kwhi, q1.kwhfm, q2.test from ( SELECT (t1.dt) AS time,(case when t1.value>t2.value AND t2.value>0 then abs(t1.value - t2.value) when t1.value>t2.value AND t2.value=0 then t2.value else t1.value END)kwhg, (case when t1.value1>t2.value1 AND t2.value1>0 then abs(t1.value1 - t2.value1) when t1.value1>t2.value1 AND t2.value1=0 then t2.value1 when t1.value1=t2.value1 AND t1.value1>0 then abs(t1.value1 - t2.value1) else 0 END) kwhc, (case when t1.value2>t2.value2 AND t2.value2>0 then abs(t1.value2 - t2.value2) when t1.value2>t2.value2 AND t2.value2=0 then t2.value2 when t1.value2=t2.value2 AND t1.value2>0 then abs(t1.value2 - t2.value2) else 0 END)kwhi, (case when t1.value3>t2.value3 AND t2.value3>0 then abs(t1.value3 - t2.value3) when t1.value3>t2.value3 AND t2.value3=0 then t2.value3 when t1.value3=t2.value3 AND t1.value3>0 then abs(t1.value3 - t2.value3) else 0 END) kwhfm FROM (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3 FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t1 JOIN (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3 FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t2 on t1.dt = t2.dt + interval 1 month) as q1 JOIN (select dataora, AVG(Test) as test from temperature where dataora between '$startTime' and '$endTime' GROUP BY date(dataora),hour(dataora)) as q2 ON q1.time=q2.dataora"); }; $rows = array(); while ($row = mysqli_fetch_assoc($result)) { //echo $a= "hello"; extract($row); $rows[] = "[$time,$test,$kwhg,$kwhc,$kwhi,$kwhfm]"; } // print it header('Content-Type: text/javascript'); //echo $range; //echo $startTime; //echo $end; echo "/* console.log(' range = $range, start = $start, end = $end, startTime = $startTime, endTime = $endTime '); */"; echo $callback ."([\n" . join(",\n", $rows) ."\n]);"; ?> 如演示所示，输出数据对于highcharts应该是正确的，但是我不能初始化图表或显示任何系列……
$(function() { // See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php $.getJSON('grafico_nuovo.php?callback=?', function(data) { // Add a null value for the end date data = [].concat(data, [[Date.GMT(2013, 9, 14, 19, 59), null, null, null, null]]); // create the chart $('#container').highcharts('StockChart', { chart : { type: 'spline', zoomType: 'xy' }, navigator : { adaptToUpdatedData: false, series : { data : data } }, scrollbar: { liveRedraw: false }, title: { text: 'AAPL history by the minute from 1998 to 2011' }, subtitle: { text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading' }, 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' }], inputEnabled: true, // it supports only days selected : 2 // day }, xAxis : { events : { afterSetExtremes : afterSetExtremes }, minRange: 3600 * 1000 // one hour }, series : [{ data : data, dataGrouping: { enabled: false } }] }); }); }); /** * Load new data depending on the selected min and max */ function afterSetExtremes(e) { var currentExtremes = this.getExtremes(), range = e.max - e.min, chart = $('#container').highcharts(); chart.showLoading('Loading data from server...'); $.getJSON('grafico_nuovo.php?start='+ Math.round(e.min) + '&end='+ Math.round(e.max) +'&callback=?', function(data) { chart.series[0].setData(data[0]); chart.hideLoading(); }); }
感谢Giorgio的任何帮助或建议
什么echo $callback ."([\n" . join(",\n", $rows) ."\n]);"; 回报？ 我建议通过json_encode（）将数组转换为json，然后在javascript中使用。
编辑：
你无法访问scirpt中的图表，更多你只能在现有的系列上使用setData，而不是像chart.series [2]那样不存在的系列。 你应该调用addSeries
val1 = []; val2 = []; val3 = []; val4 = []; val5 = []; $.each(data, function (key, value) { val1.push([value[0], value[1]]); val2.push([value[0], value[2]]); val3.push([value[0], value[3]]); val4.push([value[0], value[4]]); val5.push([value[0], value[5]]); }); chart.series[0].setData(val1); chart.addSeries({ data: val2 }); chart.addSeries({ data: val3 }); chart.addSeries({ data: val4 }); chart.addSeries({ data: val5 }); chart.hideLoading();