更新：
完整的脚本。
我有一个脚本处理一些Json数据以使用HighCharts生成图形。 Json数据有三个要素：
[{"name":"Room","data":[343,405,406,407]},
{"name":"Temp C","data":[50,50,50,50]},
{"name":"UniqueID","data":
["GLAZH03431464336298",
"GLAZH04051465483111",
"GLAZH04061464783558",
"GLAZH04071465484869"]
}]
在我的脚本中，我有以下内容：
$(function() {
var categories = [];
var data = [];
var uniqueid = [];
var chart;
$(document).ready(function() {
$.getJSON("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");
$('#container1').highcharts({
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x',
marginTop: 40,
marginRight: 30,
marginBottom: 50,
plotBackgroundColor: '#FCFFC5'
},
title: {
text: '<?php echo $_SESSION['
_amember_user ']['
hotel '];?> 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 = "water.php?room="
this.uniqueid;
console.log(uniqueid);
}
}
},
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
});
});
});
});
我想要做的是传递＆＃34; uniqueid＆＃34;并在事件点击中将其附加到URL的末尾，如：
click: function() {
window.top.location.href = "water.php?room=" + this.uniqueid;
}
如果我使用＆＃34; console.log（uniqueid，＆＃34; UniqueID＆＃34;）;＆＃34;在脚本中检查调试器中的内容，我看到：
Array ["GLAZH03431464336298",
"GLAZH04051465483111",
"GLAZH04061464783558",
"GLAZH04071465484869"]
我的问题是如何将uniqueid的内容附加到我点击事件的URL末尾。无论我做什么，我都无法解决这个问题。
答案 0 :(得分：1)
我在jsFiddle重新编写了代码。请参阅Javascript行＃140 console.log(this.uniqueid);，这是在浏览器控制台中打印undefined，这是您的代码无效的原因..
您现在遇到的问题是您无法将温度链接到Highcharts中的uniqueId。请参阅here第38行，我尝试构建以下JSON并在第201行将其设置为Highcharts.series.data。通过这样做，我可以获得第＃156行中每个点的temperature，room和uniqueId的值。
[{
y: 50,
uniqueid: 'GLAZH03431464336298'
}, {
y: 71.5,
uniqueid: 'GLAZH04051465483111'
}]
答案 1 :(得分：0)
鉴于结果中的数据集始终是相同的顺序＆amp;长度，构建您的数据对象，而不是将它们合并在一起：
$.getJSON("chart.php", function(json) {
$.each(json, function(i, el) {
var collection = [];
if (el.name == "Room" || el.name == "UniqueID")
collection = el.data;
} else {
collection = el;
}
for (var j = 0; j < collection.length; j++) {
data[j] = data[j] || {};
data[j][(el.name || "y").toLowerCase()] = collection[j];
}
});
// high charts code
});
然后在您的点击事件中，看看您是否可以抓住属性房间＆amp;唯一身份。我还没有使用过highcharts，所以我不确定在click事件中它会保留哪些属性。这是您要设置断点并检查对象的地方。