javascript - highcharts 钻取不起作用

Question

Highcharts 钻取不起作用。场景是来自图表，如果我单击任何点，它需要使用 avgTimes.testIds 显示另一个图表(检查下面的 json)。但当我点击该点时，我无法获取 testId 值。请检查 Json 和 Javascript 以供引用。

“this.series.data.indexOf( this.point )”代码无法获取indexValue，它给出“未定义”作为响应。请检查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>

Answer 1

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)]

我还将对象 options 的创建移至 getJSON 回调函数内:

<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>