我正在尝试使用 js 和 php 实现一个图表。
我已经创建了图表。现在，当用户单击图形点时，它会显示 y 轴值和 x 轴值。当用户单击图点时，我想显示另一个值( x 和 y 除外)。我已经从 ajax 文件中返回了所有这些 x、y 和 z 值。但无法实现 z 索引。请帮助我。
$("document").ready(function(event){
var pickerOpts = {
dateFormat:"d/m/yy"
};
$('.date').datepicker(pickerOpts);
function loadGraph(d1,d2){
$.ajax({
dataType:'json',
type:'POST',
url:'../ajaxtaskAnalytics',
data:{
date1:d1,
date2:d2
},
success:function(result){
$.parseJSON(result);
var gval=[];
for(var i=0;i<result['tasks'].length;i++){
gval.push([
Date.parse(result['tasks'][i].dt+' UTC')
,
result['tasks'][i].number,
result['tasks'][i].usercount
]);
}
var options = {
chart: {
renderTo: 'container'
},
title: {
text: 'Task Analytics'
},
subtitle: {
text: 'Machbee'
},
xAxis: {
type: 'datetime',
tickInterval: 1 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: Highcharts.dateFormat('%Y %b %e', this.x),
maincontentText: ' Total Tasks :'+this.y ,
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'Task Info',
lineWidth: 4,
marker: {
radius: 4
}
}]
};
options.series[0].data = gval;
//options.series[1].data = gval;
chart = new Highcharts.Chart(options);
$("#analyticsTaskCount").html("No Of Tasks in this WorkSpace is"+result['total']);
$("#analyticsUser").html("");
for(var k=0;k<result['users'].length;k++){
$("#analyticsUser").append("<br>"+result['users'][k].name+"="+result['users'][k].taskcount);
}
}
});
}
loadGraph($("#sdate").val(),$("#ddate").val());
var okay=true;
$("#sdate").live('click',function(){
$("#err_startdate").html("");
});
$("#ddate").live('click',function(){
if($("#sdate").val().length<8){
$("#err_startdate").html("Please select the first date");
okay= false;
}
});
$("#ddate").live('blur',function(){
$("#err_enddate").html("");
if($("#sdate").val().length<8){
$("#err_startdate").html("Please select the first date");
okay=false;
}
if($("#ddate").val().length<8){
$("#err_enddate").html("Please select the second date");
okay=false;
}
});
$("#ddate").live('change',function(){
loadGraph($("#sdate").val(),$("#ddate").val());
});
});
====================================== AJAX 文件输出 =======
(
[tasks] => Array
(
[0] => Array
(
[added_on] => 1322629212
[dt] => 2011/11/30
[number] => 3
[usercount] => 1
)
[1] => Array
(
[added_on] => 1323071708
[dt] => 2011/12/05
[number] => 2
[usercount] => 1
)
[2] => Array
(
[added_on] => 1323424536
[dt] => 2011/12/09
[number] => 1
[usercount] => 1
)
[3] => Array
(
[added_on] => 1323754243
[dt] => 2011/12/13
[number] => 2
[usercount] => 1
)
)
[users] => Array
(
[0] => Array
(
[name] => God
[taskcount] => 7
)
[1] => Array
(
[name] => Veela
[taskcount] => 1
)
)
[total] => 8
)
最佳答案
您需要在图表的工具提示选项中使用格式化程序属性，并且需要一个包含 z 值的数组。请参阅以下示例:
关于javascript - 如何在 javascript highchart 中实现 z 索引，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8487263/