2
업데이트 :클릭 이벤트 핸들러 함수에 jQuery 변수 추가
전체 스크립트.
저는 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
});
});
});
});
는 내가하고 싶은 것이 "을 UniqueID"통과하고 URL의 끝에 그것을 추가입니다 JSON 데이터는 세 가지 요소가 있습니다 이벤트는 다음과 같이 클릭하십시오 :
click: function() {
window.top.location.href = "water.php?room=" + this.uniqueid;
}
"console.log (uniqueid,"UniqueID "); 디버거의 콘텐츠 스크립트에 체크, 나는 참조 : 내가 클릭 이벤트에 대한 내 URL의 끝을 UniqueID의 내용을 추가 할 수있는 방법
Array ["GLAZH03431464336298",
"GLAZH04051465483111",
"GLAZH04061464783558",
"GLAZH04071465484869"]
내 질문입니다. 내가 무엇을하더라도 나는 이것을 작동시킬 수 없다.
uniqueId는 참조 할 필요가있는 하나의 값이거나 고유 한 ID가 json 응답의 각 값에 대해 별도로 저장되어 있어야합니까? – agmcleod
안녕하세요 agmcleod, 네, uniqueid 각 값에 대해 별도로 저장해야합니다. 그래프의 어느 지점을 선택 하느냐에 따라 URL은 "room =? uniqueid"로 실행되고 "$ _GET [ 'uniqueid']를 사용하여 다른 스크립트에 의해 처리됩니다. – DCJones
아 좋아요. uniqueid 나 카테고리를 객체에 붙이지 않거나'var'을 가지지 않는다면 전역 변수가됩니다. 그 나쁜. $ .each 호출에서 데이터 배열을 사용하여 수행중인 작업을 보여주기 위해 게시물을 업데이트 할 수 있고 클릭을 바인딩하는 방법을 알면 추가 지원을받을 수 있습니다. – agmcleod