如何在php中为高图's堆叠条形图的每个部分添加超链接 - How to add hyperlink to each part of high-chart's stacked bar chart in php

How to add hyperlink to each part of high-chart's stacked bar chart in php

我在我的网页中使用了high-chart的堆叠条形图代码。我试图添加一个超链接到每个部分的堆叠吧。我有一些账户的后端数据是在"完成"或在"查询"或"待定"的状态。我已经准备了代码来显示5天账户状态的图表。现在我想，当我点击"完成"的堆叠栏的任何一天的一部分，它应该打开包含在当天完成的帐户列表的页面。我附上了截图和代码供参考。谢谢。

点击这里查看一周5天的曲线图

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Stacked column chart with data from MySQL using   Highcharts</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'container',
                type: 'column',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Account Status',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'No of Accounts'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y;
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
             plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },
            series: []
        }
        $.getJSON("data.php", function(json) {
            options.xAxis.categories = json[0]['data'];
            options.series[0] = json[1];
            options.series[1] = json[2];
            options.series[2] = json[3];
            chart = new Highcharts.Chart(options);
        });
    });
    </script>
    <script src="highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0     auto"></div>
</body>
</html>

您可以添加一个事件到您的酒吧，这样做添加到您的plotOptions:

series: [],
plotOptions: {
    series: {
        cursor: 'pointer',
        point: {
            events: {
                click: function () {
                    document.location.href = 'page.php?cat=' + this.category;
                }
            }
        }
    }
},