Highcharts drilldown无效。场景是从图形，如果我点击任何点它需要使用avgTimes.testIds显示另一个图形（检查下面的json）。但是当我点击该点时，我无法获得testId值。 请查看Json和Javascript以供参考。
“this.series.data.indexOf（this.point）”代码无法获取indexValue，它将“undefined”作为response.Please检查javascript代码
回应json Json：
{
"testid": {
"name": "testId",
"data": [
208,
207,
206,
205,
202
]
},
"xaxis": {
"xaxis": "xaxis",
"data": [
"2016/03/21 01:50:04",
"2016/03/20 04:56:20",
"2016/03/20 04:41:56",
"2016/03/18 11:09:53",
"2016/03/18 09:33:15"
]
},
"avgTimes": {
"name": "avgTime",
"units": "ms",
"data": [
1894,
3141,
44966,
1792,
22929
],
"testIds": [
208,
207,
206,
205,
202
]
}
}
以下是我正在使用的javascript
var options;
var chart;
$(document).ready(function() {
init();
});
function init() {
$('#back_btn').hide();
options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x',
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [],
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function() {
return Highcharts.dateFormat('%b-%d', Date.parse(this.value));
}
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
enabled: true,
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
'<b>'+ this.x +': '+ this.y+' '+'</b><br/>'+
'TestId: '+this.series.options.testIds[this.series.data.indexOf(this.point)];
}
},
plotOptions: {
line: {
cursor: 'pointer',
point: {
events: {
click: function() {
//document.write(this.series.options.testIds[this.series.data.indexOf( this.point )]);
$('#dateDisplay').text(this.series.options.testIds[this.series.data.indexOf( this.point )]);
$.getJSON("http://localhost:8080/reports/graph/transaction?testId="+this.series.options.testIds[this.series.data.indexOf( this.point )], function(json){
options.xAxis.categories = json.xAxis.xaxisList;
options.series[0] = json.avgTimes;
options.series[1] = json.tps;
options.series[2] = json.minTimes;
options.series[3] = json.maxTimes;
options.xAxis.labels = {
formatter: function() {
//return Highcharts.dateFormat('%l%p', Date.parse(this.value +' UTC'));
return Highcharts.dateFormat('%l%p', Date.parse(this.value));
//return this.value;
}
}
options = new Highcharts.Chart(options);
$('#back_btn').show();
});
}
}
},
dataLabels: {
enabled: true
}
}
},
series: [{
type: 'line',
name: '',
data: []
}]
}
$.getJSON("http://localhost:8080/reports/graph/tests?limit=10&offset=1&env=stg&project=MarketplaceOffers&userCount=10", function(json){
options.xAxis.categories = json.xaxis.data;
options.series[0]= json.avgTimes;
//options.series[1]=json.testid;
//options.series[1].extra= json.testid;
chart = new Highcharts.Chart(options);
});
}
function goback() {
init();
$('#dateDisplay').text("2013-02");
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Dynamic Drill Down in Highcharts</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="date.js"></script>
<script src="dynamicChats.js"></script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<strong><div id="dateDisplay">2013-02</div></strong>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<a href="#" onclick="goback();" id="back_btn">Back</a>
</body>
</html>
答案 0 :(得分：3)
this.point未定义为什么您无法从this.series.data数组中检索索引。似乎在图表上单击一个点时，this引用点击处理程序中的点对象本身。
您应该替换以下行：
this.series.options.testIds[this.series.data.indexOf(this.point)]
这一个：
this.series.options.testIds[this.series.data.indexOf(this)]
我还在getJSON回调函数中移动了对象options的创建：
<script>
var chart;
$(document).ready(function () {
init();
});
function init() {
$('#back_btn').hide();
$.getJSON("http://localhost:8080/reports/graph/tests?limit=10&offset=1&env=stg&project=MarketplaceOffers&userCount=10", function (json) {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x',
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [],
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function () {
return Highcharts.dateFormat('%b-%d', Date.parse(this.value));
}
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
enabled: true,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
'<b>' + this.x + ': ' + this.y + ' ' + '</b><br/>' +
'TestId: ' + this.series.options.testIds[this.series.data.indexOf(this.point)];
}
},
plotOptions: {
line: {
cursor: 'pointer',
point: {
events: {
click: function () {
//document.write(this.series.options.testIds[this.series.data.indexOf( this.point )]);
$('#dateDisplay').text(this.series.options.testIds[this.series.data.indexOf(this.point)]);
$.getJSON("http://localhost:8080/reports/graph/transaction?testId=" + this.series.options.testIds[this.series.data.indexOf(this)], function (json) {
options.xAxis.categories = json.xAxis.xaxisList;
options.series[0] = json.avgTimes;
options.series[1] = json.tps;
options.series[2] = json.minTimes;
options.series[3] = json.maxTimes;
options.xAxis.labels = {
formatter: function () {
//return Highcharts.dateFormat('%l%p', Date.parse(this.value +' UTC'));
return Highcharts.dateFormat('%l%p', Date.parse(this.value));
//return this.value;
}
}
options = new Highcharts.Chart(options);
$('#back_btn').show();
});
}
}
},
dataLabels: {
enabled: true
}
}
},
series: [{
type: 'line',
name: '',
data: []
}]
};
options.xAxis.categories = json.xaxis.data;
options.series[0] = json.avgTimes;
chart = new Highcharts.Chart(options);
});
}
function goback() {
init();
$('#dateDisplay').text("2013-02");
}
</script>