Highcharts饼图可以有url链接 [英] Highcharts pie charts can have url links

问题描述

我在我的应用程序中使用了Highcharts饼图，饼图的数据从数据库填充。我的问题是填充饼图后，如果我点击某个区域，它应该呈现给特定的PHP页面。这是我的代码：

 函数open_risk_level_pie （）
 {
 $ chart = new Highchart（）; 
 
 $图表 - >图表 - > renderTo =open_risk_level_pie; 
 $ chart-> chart-> plotBackgroundColor = null; 
 $ chart-> chart-> plotBorderWidth = null; 
 $ chart-> chart-> plotShadow = false; 
 $ chart-> title-> text =风险等级; 
 
 $ chart-> tooltip-> formatter = new HighchartJsExpr（function（）{
 return'< b> + this.point.name +'< / b> ;：'+ this.point.y;}）; 
 
 $ chart-> plotOptions-> pie-> allowPointSelect = 1; 
 $ chart-> plotOptions-> pie-> cursor =指针; 
 $ chart-> plotOptions-> pie-> dataLabels-> enabled = false; 
 $ chart-> plotOptions-> pie-> showInLegend = 1; 
 $ chart-> plotOptions-> pie-> colors = array（'red'，'orange'，'yellow'，'black'）; 
 $ chart-> credits-> enabled = false; 
 
 //打开数据库连接
 $ db = db_open（）; 
 
 //获取风险等级
 $ stmt = $ db-> prepare（SELECT * from`risk_levels`）; 
 $ stmt-> execute（）; 
 $ array = $ stmt-> fetchAll（）; 
 $ high = $ array [0] [0]; 
 $ medium = $ array [1] [0]; 
 $ low = $ array [2] [0]; 
 
 //查询数据库
 $ stmt = $ db-> prepare（select a.calculated_risk，COUNT（*）AS num，CASE WHEN a.calculated_risk> =。 $ high。THEN'High'WHEN a.calculated_risk<。$ high。AND a.calculated_risk> =。$ medium。THEN'Medium'WHEN a.calculated_risk<。$ medium。AND a.calculated_risk> =。$ low。THEN'Low'WHEN a.calculated_risk<。$ low。AND a.calculated_risk> = 0 THEN'risk_scoring'END'AS'风险`b ON a.id = b.id WHERE b.status！= \Closed \GROUP BY level ORDER BY a.calculated_risk DESC）; 
 $ stmt-> execute（）; 
 
 //将列表存储在数组中
 $ array = $ stmt-> fetchAll（）; 
 
 //关闭数据库连接
 db_close（$ db）; 
 
 //如果数组为空
 if（empty（$ array））
 {
 $ data [] = array（No Data Available，0 ）; 
} 
 //否则
 else 
 {
 //创建数据数组
 foreach（$ array as $ row）
 {
 $ data [] = array（$ row ['level']，（int）$ row ['num']）; 
 
 $ b $ chart-> series [] = array（'type'=>pie，
'name'=>Level，
'data'=> $ data）; 
} 
 
 echo< div id = \open_risk_level_pie \>< / div> \\\
; 
 echo< script type = \text / javascript\>; 
 echo $ chart-> render（open_risk_level_pie）; 
 echo< / script> \\\
; 
  

}

解决方案 div>

在highcharts网站上有一个展示类似的例子。您可以使用point / events / click函数触发新的页面加载：

  plotOptions：{
 series： {
 cursor：'pointer'，
 point：{
 events：{
 click：function（）{
 location.href = this.options.url; 
} 
} 
} 
} 
}，
  

http://jsfiddle.net/w5Lx4/

请注意，在本例中，URL被添加到系列数据中：

  data：[{
y：29.9，
 url：'http://bing.com/search?q=foo'
}，{
  

您可以根据点y值生成一个网址来代替它。

I am using Highcharts pie charts in my application, where the data for pie chart is populating from database. My question is after populating pie chart, if i click certain area it should render to particular php page. Is it possible?

here is my code :

    function open_risk_level_pie()
    {
    $chart = new Highchart();

    $chart->chart->renderTo = "open_risk_level_pie";
    $chart->chart->plotBackgroundColor = null;
    $chart->chart->plotBorderWidth = null;
    $chart->chart->plotShadow = false;
    $chart->title->text = "Risk Level";

    $chart->tooltip->formatter = new HighchartJsExpr("function() {
    return '<b>'+ this.point.name +'</b>: '+ this.point.y; }");

    $chart->plotOptions->pie->allowPointSelect = 1;
    $chart->plotOptions->pie->cursor = "pointer";
    $chart->plotOptions->pie->dataLabels->enabled = false;
    $chart->plotOptions->pie->showInLegend = 1;
    $chart->plotOptions->pie->colors = array('red', 'orange', 'yellow', 'black');
    $chart->credits->enabled = false;

    // Open the database connection
    $db = db_open();

// Get the risk levels
$stmt = $db->prepare("SELECT * from `risk_levels`");
$stmt->execute();
$array = $stmt->fetchAll();
$high = $array[0][0];
$medium = $array[1][0];
$low = $array[2][0];

    // Query the database
    $stmt = $db->prepare("select a.calculated_risk, COUNT(*) AS num, CASE WHEN a.calculated_risk >= " . $high . " THEN 'High' WHEN a.calculated_risk < " . $high . " AND a.calculated_risk >= " . $medium . " THEN 'Medium' WHEN a.calculated_risk < " . $medium . " AND a.calculated_risk >= " . $low . " THEN 'Low' WHEN a.calculated_risk < " . $low . " AND a.calculated_risk >= 0 THEN 'Insignificant' END AS level from `risk_scoring` a JOIN `risks` b ON a.id = b.id WHERE b.status != \"Closed\" GROUP BY level ORDER BY a.calculated_risk DESC");
    $stmt->execute();

    // Store the list in the array
    $array = $stmt->fetchAll();

    // Close the database connection
    db_close($db);

    // If the array is empty
    if (empty($array))
    {
            $data[] = array("No Data Available", 0);
    }
    // Otherwise
    else
    {
            // Create the data array
            foreach ($array as $row)
            {
                    $data[] = array($row['level'], (int)$row['num']);
            }

            $chart->series[] = array('type' => "pie",
                    'name' => "Level",
                    'data' => $data);
    }

echo "<div id=\"open_risk_level_pie\"></div>\n";
echo "<script type=\"text/javascript\">";
echo $chart->render("open_risk_level_pie");
echo "</script>\n";

}

解决方案

There is an exmaple on the highcharts website showing something similar. You can use the point/events/click function to trigger a new page load:

 plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        location.href = this.options.url;
                    }
                }
            }
        }
    },

http://jsfiddle.net/w5Lx4/

Note, in this example, the URL is added to the series data:

 data: [{
            y: 29.9,
            url: 'http://bing.com/search?q=foo'
        }, {

You could replace this with generating a URL based on the point y value.

这篇关于Highcharts饼图可以有url链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！