Question

我正在使用带有向下钻取的图表，我允许选择一个点（=点击）。在事件点击时，我在AJAX的帮助下创建一个HTML表，列出与计数相关的实体（如果我看到5个项目，点击它我会看到谁是5个项目并列出它们）。这成为第2级/第3级的深入分析（取决于我点击了图表中第2级的第1级）

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

这是我的代码（EDITED）：

修改我正在添加这样的系列（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/

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

在drillup事件中，this.series [x] .data [y]对应于第二级数据。有一点很明显，因为所有系列都没有完成钻取，但是有很多系列赛事。

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

我正在使用Highcharts 5.0.9。

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

感谢您的帮助。

Answer 1

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

以下是答案（如果以上链接在将来不起作用）：

在这种情况下，您可以使用更改特定点的状态   Point.select（）函数。看看下面发布的示例。它   是这样的：在drillup（）事件中有一个调用   getSelectedPoints（）返回基础中的所有选定点   系列。接下来，调用select（）函数，将false作为   关于选定点的参数，以取消选择它。另外，电话   getSelectedPoints（）位于超时，否则会   返回一个空数组（见   https://github.com/highcharts/highcharts/issues/5583）。

代码：

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

API参考：http://api.highcharts.com/highcharts/Ch ... ctedPoints   http://api.highcharts.com/highcharts/Point.select

示例：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);

问候。

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

1 个答案: