我有一个脚本，可以从 MySQl 数据表中调用数据并在 HighCharts 图表中使用它。我的工作正常，但我想从名为“uniqueid”的数据表中添加另一个变量（字段）。
脚本 1；
$categories = array();
$categories['name'] = 'Room';
$rows1 = array();
$rows1['name'] = 'Temp C';
$uniqueid = array();
$uniqueid['name'] = 'UniqueID';
while($row_AvgWaterTemp = mysql_fetch_assoc($AvgWaterTemp)) {
$categories['data'][] = $row_AvgWaterTemp['Room'];
$rows1['data'][] = $row_AvgWaterTemp['SeqID1306'];
$uniqueid['data'][] = $row_AvgWaterTemp['UniqueID']; // NEW FIELD
}
$result = array();
array_push($result,$categories);
array_push($result,$rows1);
array_push($result,$uniqueid); // NEW FIELD
我还有一个调用脚本 1 并生成图表的脚本：
脚本2
$(function () {
var categories=[];
var data =[];
var chart;
$(document).ready(function() {
$.getJSON("../charts/chart.php", function(json) {
$.each(json,function(i,el) {
if (el.name=="Room")
categories = el.data;
else data.push(el);
});
$('#container1').highcharts({
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x',
marginTop: 40,
marginRight: 30,
marginBottom: 50,
plotBackgroundColor: '#FCFFC5'
},
title: {
text: 'Room hot water temperatures ',
x: -20, //center
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
subtitle: {
text: 'Zoom: hold cursor over chart, hold left mouse button and drag, release button',
x: -20
},
xAxis: {
categories: categories,
labels: {
enabled: false
}
},
yAxis: {
plotLines: [{
value: '<?php echo $row_Rooms['Hotmax'];?>',
color: '#FF0000',
width: 1,
zIndex: 10,
label: {
text: 'Maximum <?php echo $row_Rooms['Hotmax'];?> °C',
align: 'center',
x: -10,
y: -5,
style: {
color: '#FF0000'
}
}
}, {
value: '<?php echo $row_Rooms['HotMin'];?>',
color: '#0000CC',
width: 1,
zIndex: 10,
label: {
text: 'Minimum <?php echo $row_Rooms['HotMin'];?> °C',
align: 'center',
x: -10,
y: 20,
style: {
color: '#0000CC'
}
}
}],
showFirstLabel: false,
lineColor:'#999',
lineWidth:0.2,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: 'Temperature °C',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
},
legend: {
enabled: false,
itemStyle: {
font: '11px Trebuchet MS, Verdana, sans-serif',
color: '#000000'
},
itemHoverStyle: {
color: '#000000'
},
itemHiddenStyle: {
color: '#444'
}
},
colors: [
'#009900',
],
plotOptions: {
style: { textShadow: false },
column: {
color:'#ff00ff'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
window.top.location.href = "../chart_click_hot_water.php?room=" + this.category;
}
}
},
lineWidth: 1,
dataLabels: {
enabled: false,
rotation: 0,
color: '#000000',
align: 'center',
//format: '{point.y:.1f}', // one decimal
y: 0, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
tooltip: {
enabled: true,
crosshairs: [false, true],
positioner: function () {
return { x: 5, y: -5 };
},
shadow: false,
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.8)',
formatter: function () {
return 'Room: <b>' + this.x +
'</b> is <b>' + this.y + ' °C</b>';
}
},
credits: {
enabled: false
},
series: data
});
});
});
});
我的问题是，如何包含新字段“uniqueid”并在点击功能中使用：
click: function() {
window.top.location.href ="../chart_click_hot_water.php?uniqueid=" + this.category;
}
目前，我的“工具提示”显示房间号和水温，但是当我在脚本 1 中包含附加字段时，工具提示仅显示房间，并显示水温“未定义”。
是否可以从数据表中调用附加字段并在我的点击函数中使用它，如果可以，我该怎么做。
非常感谢您的帮助和时间。
干杯。
更新：
我有以下内容
$.getJSON("../charts/imaint_water_avg_temp_chart.php", function(json) {
$.each(json,function(i,el) {
if (el.name=="Room")
categories = el.data;
else if (el.name=="UniqueID") {
uniqueid = el.data;
} else data.push(el);
});
然后 console.log(uniqueid, "UniqueID");我在日志中看到了 UniqueID。
然后我有：
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
window.top.location.href = "../imaint_chart_click_hot_water.php?room=" + this.uniqueid;
}
}
},
但是 ?room= 没有被填充。
你或其他人知道我哪里出错了吗？ 谢谢
通过使用
this.indexuniqueid[this.index]提示： 如果有额外的数据字段，我建议您将数据表示为“具有命名值的对象列表”。它可以提供更多的结构和可读性。 您的数据可能如下所示：
[{
uniqueid: 'GLAZH03431464336298',
room: '343',
y:'50'
},{
uniqueid: 'GLAZH04051465483111',
room: '405',
y:'50'
}]
您可以跟随您的直觉并使用
this.uniqueid或
this.room带有命名值的对象列表的示例
PHP 脚本可能看起来像这样（未经测试）：
$data = array();
while($row_AvgWaterTemp = mysql_fetch_row($AvWaterTemp)){
$temp = array(
"uniqueid" => $row_AvgWaterTemp['UniqueID'],
"room" => $row_AvgWaterTemp['Room'],
"y" => $row_AvgWaterTemp['SeqID1306']
);
array_push($data,$temp);
}
$result = array();
array_push($result,$data);
echo json_encode($result); // Printing it out as json
您旧的初始 JS 代码将是相同的。
祝你好运！