Onclick von HighCharts

Question

Hiii Jedem,

In meiner Anwendung, wird es ein Teil sein, das als Admin Panel.Where die Admin-Namen kann den Bericht in highchart sehen, basierend auf der Schüler-Profil Vollendung. Im Folgenden finden Sie die Beispielseite

Meine Datenbank Beispiel

Hier erklärt mein Diagramm, dass 2 Anzahl der Studierenden absolvieren ihr Profil 80-100% .Diese Informationen aus der Datenbank genommen wird Ähnlich möchte ich entsprechende Studenteninformationen bekommen. Wie kann ich Details dieses Studenten bekommen, wenn sie onclick der Scheibe im Kreisdiagramm klicken. Onclick des Diagramms zeigt die Details der Kursteilnehmer, die und alle in der Kategorie von 80-100% .ähnlich, wenn er klicke auf gree n es wird die Details von Studenten, die und alle unter der Kategorie von 40-60% aus der Datenbank zeigen. Wie kann ich dies tun, wenn jemand die Lösung kennt, lass es mich wissen. Unten ist mein Code

Javascript

<div id="stage" style="padding-bottom:80px;" ></div> 

var stage = { 
      chart: { 
        renderTo: 'stage', 
        plotBackgroundColor: null, 
        plotBorderWidth: null, 
        plotShadow: false 
       }, 
       title: { 
        text: 'No. of Applicants by Profile Completion' 
       }, 
       tooltip: { 
        formatter: function() { 
         return '<b>'+ this.point.name +'</b>: '+ this.y ; 
        } 
       }, 
       credits: { 
        enabled: false 
       }, 
       plotOptions: { 
        pie: { 
         allowPointSelect: true, 
         cursor: 'pointer', 
         dataLabels: { 
          enabled: true, 
          color: '#000000', 
          connectorColor: '#000000', 
          distance: 10, 
          formatter: function() { 
           return '<b>'+ this.point.name +'</b>: '+ this.y; 
          }, 

         }, 

     showInLegend: true 
        } 
       }, 
       series: [{ 
        type: 'pie', 
        name: '', 
        data: [], 
        dataLabels: { 
        color:'black', 
        distance: -30, 
        formatter: function() { 
        return '<b style="font-size:16px;">'+ this.y +'</b> '; 
        } 
       } 
       }] 
      } 


      $.getJSON("get_stage_chart.php", function(json) { 

     stage.series[0].data = json; 
      chart = new Highcharts.Chart(stage); 
      }); 

get_stage_chart.php

<?php 
date_default_timezone_set('Asia/Kolkata'); 
$date = date("Y-m-d"); 
$time = date("Y-m-d H:i:s"); 
require "reports.php"; 
$reports = new reports(); 
$stages = $reports->stage_report(); 
$i=0; 
foreach ($stages as $stage) { 
$name[$i] = $stage['percentage']; 
$val[$i] = $stage['users']; 
$i++; 
} 
$jsonData = array(); 
    $i=0; 
    foreach ($stages as $stage) { 

      array_push($jsonData,array($name[$i],intval($val[$i]))); 
    $i++; 
    } 
    echo json_encode($jsonData); 
    exit; 
?> 

reports.php

<?php 
include ("dbConnection.php"); 

class reports 
{ 
    public $link; 
    function __construct() 
    { 
     $dbc = new dbConnection(); 
     $this->link = $dbc->Connect(); 
     return $this->link; 
    } 
    public function stage_report() 
    { 

     $q = $this->link->prepare('SELECT distinct percentage As percentage,count(percentage) As users from details group by percentage'); 
     $q->execute(); 
     $count = $q->fetchall(); 
     return $count; 
    } 
} 

?> 

Wenn jemand mir die Lösung für mein Problem geben wird es sehr sein hilfreich für mich. Vielen Dank im Voraus.

Answer 1

Ich verstehe nicht ganz, was Sie nach dem Klick anzeigen möchten. Aber es gibt ein Klickereignis in Highcharts.

Link: http://api.highcharts.com/highcharts#plotOptions.pie.point.events.click

Auf ihrer Demo-Seite sie ein Beispiel Graph bieten: http://www.highcharts.com/demo/line-ajax

Der folgende Code ist für Sie relevant. Fügen Sie es zu Ihrem plotOptions.pie-Objekt hinzu

point: { 
    events: { 
     click: function (e) { 
      // your code for on click 
     } 
    } 
}