Question

Hiii Everyone，

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

我的数据库示例

这里我的图表解释了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;
 ?>

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

?>

如果有人给我解决我的问题的解决方案，对我来说非常有帮助。谢谢。

Answer 1

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

link：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
        }
    }
}

从HighCharts的数据库中显示信息

1 个答案: