0
Highcharts鑽取不起作用。場景是從圖形，如果我點擊任何點它需要顯示使用avgTimes.testIds另一個圖（檢查下面的json）。但是當我點擊該點時，我無法獲得testId值。 請檢查Json和Javascript以供參考。highcharts鑽取不工作
「this.series.data.indexOf（this.point）」 代碼是不能工作得到indexValue，它給 「未定義」 作爲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
]
}
}
下面是我使用
var options;
var chart;
$(document).ready(function() {
init();
});
function init() {
\t $('#back_btn').hide();
\t options = {
\t chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x',
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [],
labels: {
\t \t \t \t \t align: 'center',
\t \t \t \t \t x: -3,
\t \t \t \t \t y: 20,
\t \t \t \t \t formatter: function() {
\t \t \t \t \t \t return Highcharts.dateFormat('%b-%d', Date.parse(this.value));
\t \t \t \t \t }
\t \t \t \t }
\t \t \t \t
},
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: {
\t cursor: 'pointer',
point: {
events: {
click: function() {
\t
//document.write(this.series.options.testIds[this.series.data.indexOf(this.point)]);
\t $('#dateDisplay').text(this.series.options.testIds[this.series.data.indexOf(this.point)]);
\t
\t $.getJSON("http://localhost:8080/reports/graph/transaction?testId="+this.series.options.testIds[this.series.data.indexOf(this.point)], function(json){
\t \t
\t \t \t \t \t \t \t 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;
\t \t \t \t \t \t \t options.xAxis.labels = {
\t \t \t \t \t \t \t \t formatter: function() {
\t \t \t \t \t \t \t \t \t \t //return Highcharts.dateFormat('%l%p', Date.parse(this.value +' UTC'));
\t \t \t \t \t \t \t \t \t \t return Highcharts.dateFormat('%l%p', Date.parse(this.value));
\t \t \t \t \t \t \t \t \t \t //return this.value;
\t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t }
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t options = new Highcharts.Chart(options);
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t $('#back_btn').show();
\t \t \t \t \t \t \t
\t \t \t \t \t \t });
\t \t \t \t \t \t \t \t
\t }
}
},
dataLabels: {
enabled: true
}
}
},
series: [{
\t type: 'line',
\t name: '',
\t data: []
\t }]
\t \t }
$.getJSON("http://localhost:8080/reports/graph/tests?limit=10&offset=1&env=stg&project=MarketplaceOffers&userCount=10", function(json){
\t 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);
\t \t });
\t }
function goback() {
\t init();
\t $('#dateDisplay').text("2013-02");
\t }
<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>
\t 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>
你知道在哪一行失敗嗎？你已經提到它在'this.series.data.indexOf（this.point）'失敗，但是你的代碼中有三次。 –
.getJSON（「http：// localhost：8080/reports/graph/transaction？testId =」+ this.series.options.testIds [this.series.data.indexOf（this.point）] –
這很奇怪，它可以在getJSON調用中使用，但不能在getJSON調用中使用。你可以添加'var index = this.series.data.indexOf（this.point）'作爲你的點擊回調的第一行，並在你需要的地方使用它它失敗了，getJSON調用）？ –