Highcharts：在钻取时，如何取消选择我选择的点？

Question

我正在使用带有向下钻取功能的图表，并且允许 select 一个点（=单击）。在事件点击时，我在 AJAX 的帮助下创建了一个 HTML table 来列出与计数相关的实体（如果我看到 5 个项目，通过点击它我会看到谁是 5 项并列出它们）。这成为第二级/第三级的向下钻取（取决于我点击了图表中第二级的第一级）

但是，我想在向上钻取事件的第一层删除 selection。

这是我的代码（已编辑）：

编辑 我正在添加这样的系列 (sample found here) :

$(function() {
   var myChart = new Highcharts.Chart({
        chart: {
           type: 'column',
           renderTo: 'drillDownContainer',

           // Deactivate drilldown by selection.
           // See reason below in the drilldown method.
           selection: function(event) {
                 return false;
           },
           drilldown: function(e) {
                    // Deactivate click on serie. To drilldown, the user should click on the category
                    if (e.category === undefined)
                    {
                        return;
                    }

                    // Set subTitle (2nd param) by point name without modify Title
                    // Giving 1st param as null tells the text will be for the subTitle,.
                    // For Title, remove the null 1st param and let text.
                    this.setTitle(null, { text: e.point.name });

                    if (!e.seriesOptions) {
                        var chart = this,
                            drilldowns = {
                                'Social': [
                                    {"name":"Serie 1","data": [{"id":113,"name":"my data","y":14}
                               ]}                                  
                           ]
                        };

                        var categorySeries = drilldowns[e.point.name];
                        var series;

                        for (var i = 0; i < categorySeries.length; i++) {
                            if (categorySeries[i].name === e.point.series.name) {
                                series = categorySeries[i];
                                break;
                            }
                        }

                        chart.addSingleSeriesAsDrilldown(e.point, series);
                        drilldownsAdded++;

                        // Buffers the number of drilldown added and once the number of series has been reached, the drill down is applied
                        // So, can't navigate by clicking to a single item.
                        // However, simply click on the category (xAxis) and then unselect the other series by clicking on legend
                        // The click has been disabled.
                        if (drilldownsAdded === 3) {
                            drilldownsAdded = 0;
                            chart.applyDrilldown();
                        }
                    }
                },
                drillup: function(e) {
                    this.setTitle(null, { text: '' }); // Erase subTitle when back to original view
                    $('#ajaxContainer').html(''); // Remove the table drilldown level3
                },
                drillupall: function(e) {
                    debugger;
                    console.log(this.series);
                    console.log(this.series.length);

                    for(i = 0; i < this.series.length; i++)
                    {
                        console.log("i = " + i);
                        console.log(this.series[i].data.length);
                        for (d = 0; i < this.series[i].data.length; d++)
                        {
                            console.log("d = " + d);
                            console.log(this.series[i].data[d].selected);
                        }
                    }
                }
        }
   }); -- End of myChartdeclaration

   myChart.addSeries({
                    color: colorsArray['impact101'],
                    name: '1-Modéré',
                    data: [
                        {
                            id: '101',
                            name: 'Type 1',
                            y: 64,
                            drilldown: true
                        },
                        {
                            id: '102',
                            name: 'Type 2',
                            y: 41,
                            drilldown: true
                        }]
                }, true);

});

selection 点的演示：http://jsfiddle.net/8truG/12/

我想做什么？ （编辑） 如果我 select 第 2 层的一个点，然后 return 到第 1 层，然后返回到相同的向下钻取数据，之前 selected 的点不再 selected。 但是，对于第 1 级，select 离子仍然存在。

在drillup事件中，this.series[x].data[y]对应的是第2层的数据。有点明显，因为所有系列的向下钻取都没有完成，但事件引发的事件与系列一样多。

在 drillupall 活动中，我得到了正确的意甲。我可以在调试时看到我的 3 系列，但它们都没有任何数据。所以我不能按照下面评论中的建议应用 this.series[i].data[d].selected 。

我正在使用 Highcharts 5.0.9。

有什么想法可以帮助我吗？

感谢您的帮助。

Answer 1

我在 Highcharts 论坛上得到了帮助。 See here.

这是答案（以防上面的 link 将来不起作用）：

In this case you can change the state of a specific point with Point.select() function. Take a look at the example posted below. It works like that: in drillup() event there is a call of getSelectedPoints() which returns all selected points from the base series. Next, there is a call of select() function with false as an argument on a selected point to unselect it. In addition, the call of the getSelectedPoints() is located in a timeout, otherwise it would return an empty array (see https://github.com/highcharts/highcharts/issues/5583).

CODE:

setTimeout(function() {   selectedPoints =
     chart.getSelectedPoints()[0];  
     chart.getSelectedPoints()[0].select(false); }, 0);

API Reference: http://api.highcharts.com/highcharts/Ch ... ctedPoints http://api.highcharts.com/highcharts/Point.select

Examples: http://jsfiddle.net/d_paul/smshk0b2/

因此，这里是解决问题的代码：

drillupall: function(e) {
                        this.setTitle(null, { text: '' }); // Erase subTitle when back to original view
                        $('#ajaxContainer').html(''); // Remove the table drilldown level3

                        var chart = this,
                            selectedPoints;

                        setTimeout(function() {
                            selectedPoints = chart.getSelectedPoints()[0];
                            // Ensure there is any selectedPoints to unselect
                            if (selectedPoints != null)
                            {
                                selectedPoints.select(false);
                            }
                        }, 0);

此致。