2016-06-01 48 views
0

HIII大家的,顯示信息從數據庫的onclick HighCharts

在我的應用程序,將有一部分被命名爲管理員Panel.Where管理員可以看到基於學生簡介完成在highchart報告。 下面是示例頁面

enter image description here

我的數據庫實例

enter image description here

這裏我表解釋說,2號學生完成他們的個人資料80-100%。這信息是從數據庫中獲取。同樣,我想獲得相應的學生信息。當他們點擊餅圖片時,我怎樣才能獲得該學生的詳細信息。單擊圖表將顯示學生的詳細信息,以及所有類別爲80-100%的學生。類似地,如果他點擊格力它會顯示數據庫中40-60%的學生的人數和40-60%以下的學生的詳細信息。如果有人知道該解決方案,請告訴我,我該如何做到這一點。 下面是我的代碼

的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; 
    } 
} 

?> 

如果有人給我爲我的問題的解決方案將是非常對我有幫助。提前感謝。

+0

您可以將這些信息保存在每個點上的自定義參數中。 I.e {y:10,customParam:'您的自定義文本和信息'}。然後在[單擊事件](http://api.highcharts.com/highstock#plotOptions.series.point.events)或[tooltip.formatter](http://api.highcharts.com/highstock#tooltip.formatter)從this.point.options.customParam引用中提取。 –

+0

我不明白..你可以告訴我任何示例代碼 –

+0

你的每個數據點應該是對象。要在PHP中創建一個點並使用x,y,customParam等參數設置array()。 –

回答

0

我不太明白你想在點擊後顯示什麼。但是在高層圖中有一個點擊事件。

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

在他們的演示頁,他們提供的示例圖表:http://www.highcharts.com/demo/line-ajax

下面的代碼是與您有關。將其添加到您的plotOptions.pie對象

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

我想從數據庫中獲取相應的學生詳細信息,並將其顯示在表格中..這將發生在點擊每個片段 –

+0

是時,正如我已經說過的,只需將您的邏輯用於檢索點擊函數中的數據即可。您還可以查看顯示數據的高點示例 –

相關問題