highchart 甜甜圈 - 单击切片通过从 userService 搜索打开页面

Question

我有一个甜甜圈饼图。点击图例项目，它导航到它从 userSevice 检索的特定页面，如下所示 -

pic of user service]1

legendItemClick:

function(e) { debugger;
    this.userService.search(e.target.id);
    return false;
}.bind(this)

我正在寻找相同的功能，当我点击图表的饼图时它应该导航到特定的相关页面。我在下面尝试过但没有成功 -

point: {
    events: {   
        click: function(e){
            this.userService.search(e.target.id);
            return false;
        }.bind(this)
    }
}

我出错的地方有什么帮助吗？

用户服务 -

  search(id: any) {
        let headers = new Headers();


        let data = { "jql": id };
        let body = JSON.stringify(data);
        let http: Http
       var method = method || "post";
        var params;
        var path ;       
        path = ' http://imptdg/IMR/Ticket/DashBoard';
                var form = document.createElement("form");
                form.setAttribute("method", method);
                form.setAttribute("action", path);          
                        var hiddenField = document.createElement("input");
                        hiddenField.setAttribute("type", "hidden");
                        hiddenField.setAttribute("name", 'jql');
                        hiddenField.setAttribute("value", id);
                        form.appendChild(hiddenField);
                document.body.appendChild(form); debugger;
                form.submit();



    }


defaults() {
    this.options = {

        title: { text: ' ' },
        colors: ['rgba(79, 162, 189, 1)', 'rgba(84, 135, 201, 1)', 'rgba(143, 185, 91, 1)', 'rgba(90, 183, 130, 1)', 'rgba(71, 195, 185, 1)', 'rgba(190, 120, 203, 1)', 'rgba(228, 211, 84, 1)', 'rgba(43, 144, 143, 1)', 'rgba(145, 232, 225, 1)'],
        chart: {
            type: 'pie',
            animation: true
        },
        credits: {
            enabled: false
        },
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 300
                },
                chartOptions: {
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        layout: 'vertical',
                        labelFormatter: function () {
                            return '<div style="width:180px"><span class="pull-left" style= "font-weight: 500; padding-bottom: 5px; font-family:Helvetica ">' + this.name +
                                '</span><span class="pull-right" style= "font-weight: 500" >' + this.value +
                                '</span></div> ';
                        }
                    },
                    pie: {
                        size: 50,
                        innerSize: 20
                    }
                }
            }]
        },

        plotOptions: {
            pie: {
                innerSize: '40%',
                allowPointSelect: true,
                slicedOffset: 0,                    
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },

                showInLegend: true,                                   
                 point: {
                    events: {   
                        click:function(e){ 
                            this.userService.search(e.target.id); // this part not working
                            return false;
                        }.bind(this), 

                        legendItemClick: function (e) { 

                            this.userService.search(e.target.id);
                            return false;
                        }.bind(this),

                    }

                    },
                states: {
                    hover: {
                        halo: {
                            size: 0
                        },
                        enabled : true
                    }
                }
            },

            series: {
                animation: false,

                }

                },




        },

        legend: {
            useHTML: true,
            enabled: true,
            align: 'right',
            verticalAlign: 'top',
            layout: 'vertical',
            symbolHeight: 12,
            itemMarginBottom: 1,
            symbolWidth: 25,
            symbolRadius: 1,
            labelFormatter: function () {
                return '<div style="width:180px;"><div class="pull-left" style= "font-weight: 500; padding-bottom: 3px;padding-top:3px;  width: 130px; font-family:Helvetica; white-space: normal; word-break:break-word ">' + this.name 

            },


            },
        },

        series: [{
            data: this.donutchartData,
            allowPointSelect: true
        }]
    };

}

}

Answer 1

假设您的系列数据类似于 [{name: 'Category 1', id: 1, y: 20}, ...] 您需要从点击的点获取 id

defaults() {
    let self = this; // store this in self so you can use component this and highcharts point event this
    this.options = {
        // other options
        plotOptions: {
            pie: {
                point: {
                    function(e){ 
                        let id = this.id; // get id from series data
                        self.userService.search(id);
                        return false;
                    }
                }
            }
        }
    }
}

Answer 2

它现在正在运行，我已经阅读了 highchart 甜甜圈的 api 文档 - https://api.highcharts.com/highcharts/plotOptions.pie.events.click。现在它正在导航并引导我到我正在寻找的正确页面。

point: {
                            events: {   
                                click:function(e){ 

                                    this.userService.search(e.point.id);

                                }.bind(this)

highchart 甜甜圈 - 单击切片通过从 userService 搜索打开页面

highchart donut - click on slice opens page by searching from userService

javascript

angular

donut-chart