Highcharts错误＃15显示错误的数据系列
我的图表出现了奇怪的行为。 基本上，它是通过jsonp回调从mysql db动态更新的。它是一个5系列数据，一个样条类型和4列类型。 首先，当我加载图表时，没有显示任何内容。 第二，如果我选择具有第一个或最后一个数据系列的范围（特别是今天的数据或系列的第一天），我得到一个错误的结果，在yaxis和通常的Highcharts中有巨大的值＃ 15错误。 我已经使用此jsfiddle中的数据系列检查了我的json：http://jsfiddle.net/4knAX/2/并且everthing很好（但是aftersetextremes函数被禁用）。 最后，当我选择一个小时范围，PHP输出15分钟值时，我只得到每日值。 我经常用jsfiddle和php代码检查json，我无法从他们那里得到任何可用的答案。 有我的js代码：
<!DOCTYPE HTML>
<html>
<head>
<link rel="shortcut icon" href="./favicon.ico" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Telegestione Elektra</title>
<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="./js/exporting.js"></script>
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$.getJSON('grafico_nuovo.php?callback=?', function(data) {
data = [].concat(data, [[Date.UTC(2013, 7, 14, 19, 59), null, null, null, null,null]]);
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]]);
});
$('#container').highcharts('StockChart', {
chart: {
//type: 'spline',
//zoomType: 'xy'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: val1
}
},
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: 'day',
count: 1,
text: '1d'
}, {
type: 'week',
count: 1,
text: '1w'
},{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true, // it supports only days
selected : 1 // day
},
xAxis: { type:"datetime",
minRange: 3600 * 1000, // an hour
dateTimeLabelFormats: { minute: '%H:%M', day: '%A. %e/%m' },
labels: {
rotation: 330,
y:20,
staggerLines: 1,
},
events : {
afterSetExtremes : afterSetExtremes
},
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Consumo',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} Kw',
style: {
color: '#4572A7'
}
},
opposite: true
}],
series:[{ name:'Test',
type:'spline',
tooltip: {
shared:true,
valueSuffix: ' °C',
valueDecimals: 2
},
yAxis: 0,
data:val1
},
{ name:'kwhg',
type:'column',
yAxis: 1,
tooltip: {
shared:true,
valueSuffix: ' Kwh',
valueDecimals: 2
},
data:val2
},
{ name:'kwhc',
yAxis: 1,
type:'column',
tooltip: {
shared:true,
valueSuffix: ' Kwh',
valueDecimals: 2
},
data:val3
},
{ name:'kwhi',
yAxis: 1,
type:'column',
tooltip: {
shared:true,
valueSuffix: ' Kwh',
valueDecimals: 2
},
data:val4
},
{ name:'kwhfm',
yAxis: 1,
type:'column',
tooltip: {
shared:true,
valueSuffix: ' Kwh',
valueDecimals: 2
},
data:val5
},
]
}, function (chart) {
chart.showLoading('Loading data from server2...');
chart.series[0].setData(val1);
chart.series[1].setData([]);
chart.series[2].setData([]);
chart.series[3].setData([]);
chart.series[4].setData([]);
chart.hideLoading();
});
});
});
function afterSetExtremes(e) {
var currentExtremes = this.getExtremes(),
range = e.max - e.min,
chart = $('#container').highcharts();
chart.showLoading('Loading data from server3...');
//chart.xAxis[0].setExtremes(Date.UTC(2014, 0, 2), Date.UTC(2014, 0, 8));
$.getJSON('grafico_nuovo.php?start='+ Math.round(e.min) +
'&end='+ Math.round(e.max) +'&callback=?', function(data) {
chart.series[0].setData([]);
chart.series[1].setData([]);
chart.series[2].setData([]);
chart.series[3].setData([]);
chart.series[4].setData([]);
$.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.series[1].setData(val2);
chart.series[2].setData(val3);
chart.series[3].setData(val4);
chart.series[4].setData(val5);
chart.hideLoading(); });
};
</script>
</head>
<body>
<div id="container" style="min-width: 210px; height: 550px; margin: 0 auto; background: url(./img/257.gif);background-repeat:no-repeat;background-position:center"></div>
</body>
</html>
和我的php也是：
<?php
/**
* This file loads content from four different data tables depending on the required time range.
* The stockquotes table containts 1.7 million data points. Since we are loading OHLC data and
* MySQL has no concept of first and last in a data group, we have extracted groups by hours, days
* and months into separate tables. If we were to load a line series with average data, we wouldn't
* have to do this.
*
* @param callback {String} The name of the JSONP callback to pad the JSON within
* @param start {Integer} The starting point in JS time
* @param end {Integer} The ending point in JS time
*/
// 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");
}
if (!$start) $start = (time() - (365 * 24 * 60 * 60)) * 1000;
$end = $_GET['end'];
if ($end && !preg_match('/^[0-9]+$/', $end)) {
die("Invalid end parameter: $end");
}
if (!$end) $end = time() * 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('Y-m-d H:i:s', strtotime(gmstrftime('%Y-%m-%d %H:%M:%S', $start / 1000)));
//$endTime = gmstrftime('%Y-%m-%d %H:%M:%S', $end / 1000);
$endTime= date('Y-m-d H:i:s', strtotime(gmstrftime('%Y-%m-%d %H:%M:%S', $end / 1000) ));
// find the right table
// two days range loads minute data
if ($range < 3 * 24 * 3600 * 1000) {
if (!$link) {
die('Could not connect: ' . mysqli_error());};
//echo "minute data2" ;
$result = mysqli_query($link," select 1000*unix_timestamp(q1.time) as time, (q1.kwg) as kwhg, (q1.kwc) as kwhc, (q1.kwi) as kwhi, (q1.kwfm) as kwhfm, (q2.test) as test from
(select dataora as time, kwg, kwc, kwi, kwfm from misure where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' ) as q1
JOIN
(select dataora, (Test) as test from temperature where dataora between '$startTime 00:00:00.000' and '$endTime 00:00:00.000' ) as q2
ON q1.time=q2.dataora");
//one week range loads hourly data
} elseif ($range < 7 * 24 * 3600 * 1000) {
if (!$link) {
die('Could not connect: ' . mysqli_error());};
//echo "hourly data1" ;
$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 00:00:00.000' and '$endTime 00:00:00.000' 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 00:00:00.000' and '$endTime 00:00:00.000' 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 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dataora),hour(dataora)) as q2
ON q1.time=q2.dataora");
// one month range loads hourly data
} elseif ($range < 31 * 24 * 3600 * 1000) {
if (!$link) {
die('Could not connect: ' . mysqli_error());};
//echo "hourly 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 00:00:00.000' and '$endTime 00:00:00.000' 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 00:00:00.000' and '$endTime 00:00:00.000' 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 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dataora),hour(dataora)) as q2
ON q1.time=q2.dataora");
// one year range loads daily data
} elseif ($range < 15 * 31 * 24 * 3600 * 1000) {
if (!$link) {
die('Could not connect: ' . mysqli_error());};
//echo "daily 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 00:00:00.000' and '$endTime 00:00:00.000' 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 00:00:00.000' and '$endTime 00:00:00.000' 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 00:00:00.000' and '$endTime 00:00:00.000' 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 00:00:00.000' and '$endTime 00:00:00.000' 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 00:00:00.000' and '$endTime 00:00:00.000' 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 00:00:00.000' and '$endTime 00:00:00.000' GROUP BY date(dataora),hour(dataora)) as q2
ON q1.time=q2.dataora");
};
$rowst = array();
while ($row = mysqli_fetch_assoc($result)) {
extract($row);
$rowst[] = "[$time,$test,$kwhg,$kwhc,$kwhi,$kwhfm]";
}
// print it
header('Content-Type: text/javascript');
echo "/* console.log(' range = $range, start = $start, end = $end, startTime = $startTime, endTime = $endTime '); */";
echo $callback ."([\n" . join(",\n", $rowst) ."\n]);";
?>
我无法理解为什么jsfiddle会向我显示正确的图表，但我的浏览器不能用相同的代码做同样的事情。
提前致谢
ps：这是我的测试页面：79.28.203.203/telegestione/grafico_nuovo.html这是我的代码
生成的图表
列系列：
1 个答案:
答案 0 :(得分：0)
解决方案似乎也很奇怪：我必须在ajax请求中反转e.max和e.min值，一切正常。但是当我在范围导航器中选择“日期”时，我无法获得15分钟的数据。
$.getJSON('grafico_nuovo.php?start='+ Math.round(e.max) +
'&end='+ Math.round(e.min) +'&callback=?', function(data) {
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？