highcharts drilldown çalışmıyor

Question

Highcharts drilldown çalışmıyor. Senaryo Herhangi bir noktayı tıklatırsam avgTimes.testIds kullanarak başka bir grafik göstermesi gerekiyor (json'un altında kontrol edin). Ama ben noktayı tıkladığımda testId değerini alamıyorum. Referans için lütfen Json ve Javascript'i kontrol edin.

"this.series.data.indexOf (this.point)" kod javascript kodu

Tepki json Json kontrol response.Please olarak "tanımsız" veriyor, indexValue almak için çalışmıyor:

Aşağıda

{ 
    "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 
    ] 
    } 
} 

i

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>

kullanıyorum javascript

Answer 1

this.point undefined bu yüzden bu dizini this.series.data dizisinden alamıyorsunuz. Grafikte bir noktaya tıklandığında, this, tıklama işleyicisinde nokta nesnesinin kendisini ifade eder.

Satır feryat değiştirmelisiniz: Bu teker

this.series.options.testIds[this.series.data.indexOf(this.point)]

:

this.series.options.testIds[this.series.data.indexOf(this)]

Ben de getJSON geri arama işlevi içinde nesnenin options oluşturulmasını taşındı:

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