javascript - Highcharts : On drillup, 如何取消选择我选择的点？

Question

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

但是，我想删除向上钻取事件中第一级的选择。

这是我的代码(已编辑):

编辑 我正在添加这样的系列(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);

});

选点演示:http://jsfiddle.net/8truG/12/

我想做什么？ (编辑) 如果我在第二级选择一个点，然后返回到第一级，然后返回到相同的向下钻取数据，则不再选择之前选择的点。 然而，对于第一级，选择仍然存在。

在drillup事件中，this.series[x].data[y]对应第2层的数据。很明显，因为所有系列的深入分析尚未完成，但事件引发的数量与系列一样多。

在 drillupall 事件中，我得到了正确的系列。我可以在调试中看到我的 3 系列，但它们都没有任何数据。因此，我无法按照下面评论中的建议应用 this.series[i].data[d].selected 。

我使用的是 Highcharts 5.0.9。

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

感谢您的帮助。

Answer 1

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

这是答案(以防上面的链接将来不起作用):

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);

问候。