javascript - 单击 HighCharts 时显示数据库中的信息

Question

大家好，

在我的应用程序中，有一个名为管理面板的部分。管理员可以在其中根据学生个人资料的完成情况在 Highcharts 中查看报告。下面是示例页面

我的数据库示例

这里我的图表解释了 2 名学生完成了他们的个人资料 80-100%。此信息取自数据库。同样，我想获取相应的学生信息。当他们单击切片时，我如何获取该学生的详细信息饼图。图表的单击将显示 80-100% 类别的学生的详细信息。同样，如果单击绿色，它将显示数据库中 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;
 ?>

报告.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;
    } 
}

?>

如果有人为我的问题提供解决方案，这将对我非常有帮助。提前致谢。

Answer 1

我不太明白你点击后想要显示什么。但是highcharts中有点击事件。

链接: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
        }
    }
}