我正在研究Highchart馅饼。当我单击一个切片时,我想进行向下钻取并更新我的图表标题。

我的钻取工作正常。
我的标题更新方法也是如此。

但是,当我尝试在同一单击上进行更新和下钻时,它不起作用,因为在我可以捕获点击的点值之前,似乎发生了下钻。

Here is a JSFiddle to illustrate my point.

这是我的js代码:

$(function () {
        status_ = [['Ouverts', 896],['En cours',8],['Résolus - Clôs',0],['Ouverts', 3],['En cours',65],['Résolus - Clôs',0],['Ouverts', 427],['En cours',193],['Résolus - Clôs',0],['Ouverts', 48],['En cours',41],['Résolus - Clôs',0],['Ouverts', 2],['En cours',0],['Résolus - Clôs',0],['Ouverts', 38],['En cours',42],['Résolus - Clôs',0],['Ouverts', 244],['En cours',123],['Résolus - Clôs',0],['Ouverts', 5],['En cours',222],['Résolus - Clôs',0],['Ouverts', 441],['En cours',0],['Résolus - Clôs',0],['Ouverts', 259],['En cours',2],['Résolus - Clôs',0],['Ouverts', 16],['En cours',2],['Résolus - Clôs',0],['Ouverts', 6],['En cours',0],['Résolus - Clôs',0]];
        var browserData = [];
        var drillDownSerie = [];

        for (var i = 0; i <18 ; i++) {

            // add browser data
            browserData.push({
                name: i,
                y: i
                //if you uncomment here the drilldown works but not the title update
                //,drilldown: i
            });

            drillDownSerie.push({
                id: i,
                data: [status_[3 * i],
                status_[3 * i + 1],
                status_[3 * i + 2]
            ]
            });
            }

            $('#summary').highcharts({
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Répartition des 3000 derniers tickets'
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}: {point.y}'
                        },
                    point:{
                        events:{
                            click: function(){
                                UpdateTitle(this.y);
                            }
                        }
                    }
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> of total<br/>'
            },
            credits : {enabled : false},
            series: [{
                name: 'Département',
                colorByPoint: true,
                data: browserData
            }],
            drilldown: {
                series: drillDownSerie
            }
        });
        var chart =  $('#summary').highcharts();


        function UpdateTitle(argument1) {
           chart.setTitle({
        text: argument1
        })
        }


    })

最佳答案

为什么要使用点击事件?使用下钻和下钻,请参阅:


向下钻取:docs
汇总:docs

07-28 12:52