【发布时间】：2016-08-14 18:37:44
【问题描述】：
因为我对 JS 很陌生，所以我不明白如何在我的代码中实现多个数据系列
这是我用作数据采集器的 php 页面：
getTrendData-TIMEREQUESTED-hms.php
<?php
//Define possible Argument request
$format = $_GET['format'];
if($format=='json') {
header("Content-type: text/json");
}
//Define database credential
$servername = "localhost";
$username = "test";
$password = "test";
$dbname = "test";
try {
//Open connection to mysql_db from defined Database credentials
$connection = mysqli_connect($servername, $username, $password, $dbname) or die ("Error " . mysqli_error($connection));
$sql = "select TIMEREQUESTED,TS FROM TIMEREQUESTED ORDER BY TS;";
$result = mysqli_query($connection, $sql) or die ("Error in Selecting " . mysqli_error($connection));
//create an array
$data = array();
while($row = mysqli_fetch_assoc($result)) {
$TIMEREQUESTED = strtotime($row['TIMEREQUESTED'])*1000;
$TS = strtotime($row['TS'])*1000;
$data[] = array($TS, $TIMEREQUESTED);
}
echo json_encode($data);
//close the db connection
mysqli_close($connection);
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>
比我在 HighCharts 中包含一个 Ajax 调用，每 2500 毫秒调用一次，
getTrendData-TIMEREQUESTED-hms.php
[[1461241983000,5.67,0],[1461242015000,16.67,0],[1461242164000,16.67,0],[1461242303000,26.25,0],[1461242835000,-2.5,0],[1461242869000,-2.5,0],[1461242991000,1.5,0],[1461243034000,3.14,0],[1461243374000,-14.22,0],[1461243456000,-11.92,0],[1461244995000,0,0],[1461245036000,-3.6,140],[1461245208000,-3,140],[1461245260000,3.56,140],[1461245312000,2.1,140],[1461245346000,2.1,140],[1461245411000,3.5,140],[1461245442000,3.5,140],[1461245479000,-1,140],[1461245757000,-0.8,140],[1461245809000,-0.69,140]]
TIMEREQUESTED-hms.html
function buildTIMEREQUESTED() {
var chart;
var dataSource = 'getTrendData-TIMEREQUESTED-hms.php?format=json';
var ChartHeight = window.innerHeight;
function requestData() {
$.ajax({
url: dataSource,
success: function(points) {
chart.series[0].setData(points, true);
setTimeout(requestData, 2500);
},
cache: false
});
}
$(document).ready(function() {
//add our div for the chart
$("#container").append("<div id=chart-laptime style='width:100%''></div>");
chart = new Highcharts.Chart({
chart: {
height: ChartHeight,
renderTo: 'chart-laptime',
defaultSeriesType: 'line',
events: {
load: function() {
requestData();
}
},
},
tooltip: {
enabled: true,
formatter: function() {
s = (this.y / 1000);
m = Math.floor(s / 60);
h = Math.floor(m / 60);
s = s % 60;
m = m % 60;
h = h % 24;
if (h < 9) h = "0" + h;
if (m < 9) m = "0" + m;
if (s < 9) s = "0" + s;
return '<span style="color:black">Time Zero - </span>' + [m, s].join(':');
}
},
title: {
text: 'TIMEREQUESTED'
},
subtitle: {
text: 'BEST 5 CAR AVEREGE LAPTIME IN LAST 10 MINUTES'
},
xAxis: {
type: 'datetime',
title: {
text: 'RACE TIME'
}
},
yAxis: {
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S',
},
//dateFormat: {"%H:%M:%S.%L"}
title: {
text: 'TIMEREQUESTED'
}
},
series: [{
name: 'TIMEREQUESTED',
showInLegend: false,
//tooltip: {type: 'datetime',},
data: [],
}]
}); //end chart
}); //end document.ready
}
这样我可以正确显示单个系列，但是通过 MySQL 查询，我可以从数据库中获取更多列，并解析 json 文件的每一行，（如 JSON 文件中所示来自 php 请求，每个数组都有第三个值）但我无法理解如何显示多个数据系列，xAxis 上始终是 JSON 文件的第一列，而 yAxis 上每次都有不同的列.
您能给我一些关于如何在同一个图表上显示多个系列的建议吗？不胜感激，
最好的问候。
【问题讨论】：
-
先有个疑问，
[1461241983000,5.67,0]数据格式，第一个值是时间戳，第二个和第三个值是什么？两个系列的 y 轴值？ -
是的，它们是两个系列的 y 轴值
-
所以对于两个不同的系列，您需要不同的数组。所以对于一个系列
[1461241983000,5.67]和第二个系列[1461241983000,0]。然后为两个不同的系列调用setData而不仅仅是chart.series[0] -
我可以在“function(points) {}”中使用 javascript 创建所有数组吗？如果有人可以提供一些示例代码将不胜感激。
标签： php mysql json highcharts