Highcharts Drilldown funktioniert nicht

Highcharts Drilldown funktioniert nicht. Szenario ist Vom Diagramm, wenn ich auf irgendeinen Punkt klicke Es muss ein anderes Diagramm mit avgTimes.testIds angezeigt werden (siehe unten json). Aber ich bin nicht in der Lage, testId Wert zu erhalten, wenn ich auf den Punkt klicke. Bitte überprüfen Sie Json und Javascript als Referenz.Highcharts Drilldown funktioniert nicht

"this.series.data.indexOf (this.point)" Code funktioniert nicht den Indexwert zu erhalten, wird es geben "undefiniert" als response.Please zu überprüfen Javascript-Code

Antwort 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 
    ] 
    } 
}

Unten ist die Javascript, die ich

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>

bin mit

Quelle

2016-03-25 Madhu Cheepati

Weißt du, an welcher Leitung es scheitert? Sie haben erwähnt, dass es bei "this.series.data.indexOf (this.point)" fehlschlägt, aber Sie haben es dreimal in Ihrem Code. –

.getJSON ("http: // localhost: 8080/Berichte/Grafik/Transaktion? TestId =" + this.series.options.testIds [this.series.data.indexOf (this.point)] –

das ist seltsam, dass es funktioniert in der Zeile davor, aber nicht im getJSON-Aufruf Kann man 'var index = this.series.data.indexOf (this.point)' als erste Zeile des Klick-Callbacks hinzufügen und dort verwenden, wo man es braucht (grundsätzlich wo es schlägt fehl, der getJSON-Aufruf)? –

this.point ist undefiniert, deshalb können Sie den Index nicht aus dem Array this.series.data abrufen. Es scheint, dass, wenn auf einen Punkt geklickt wird, this auf das Punktobjekt selbst im Click-Handler verweist.

Sie sollten die Zeile unten ersetzen:

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

durch dieses:

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

Ich zog auch die Schaffung des Objekts options innerhalb der getJSON Callback-Funktion:

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

Quelle

2016-03-25 01:59:56 Darkseeds

Highcharts Drilldown funktioniert nicht

Antwort

Verwandte Themen