如何在点击 angular highcharts 时打开 ui-bootstrap 下拉菜单

Question

这是我传递给 highchart 指令并在单击 highchart 列时获取点击事件的配置对象，现在单击 highchart 的任何列我想在那里打开下拉列表：

options: {
                        chart: {
                            type: 'column'
                        },

                    },
                    xAxis: {
                        categories: ['Oct 2015', 'Nov 2015', 'Dec 2015', 'Jan 2016', 'Feb 2016', 'March 2016']
                    },
                    yAxis: [{ // Primary yAxis
                        title: {`enter code here`
                            text: 'Volume'
                        }
                    }, { // Secondary yAxis
                        title: {
                            text: 'Sentiment'
                        },
                        opposite: true
                    }],
                    series: [{
                        name: 'Volume - Same period last year',
                        type: 'column',
                        data: [1410, 610, 400, 785, 450, 400],
                        point: {
                            events: {
                                click: function(e) {
                                    vm.showDropdown = true;
                                    vm.dropDownStyle.top = e.clientY;
                                    vm.dropDownStyle.left = e.clientX;
                                    console.log('event', e);
                                    $scope.$apply();
                                }
                            }
                        },
                        color: '#2CAFC7'
                    },  {
                        name: 'Volume - Last 180 days ',
                        type: 'column',
                        data: [1210, 710, 700, 485, 410, 350],
                        point: {
                            events: {
                                click: function(e) { // here I am getting click event
                                    console.log('clicked');
                                    vm.showDropdown = true;
                                    vm.dropDownStyle.top = e.clientY;
                                    vm.dropDownStyle.left = e.clientX;
                                    console.log('event', e);
                                    $scope.$apply();
                                }
                            }
                        },
                        color: '#4C79BF'
                    }],

                    func: function (chart) {
                        //setup some logic for the chart
                        $timeout(function () {
                            chart.reflow();
                        }, 1000);
                    }
                }

Answer 1

您可以使用接受表达式的 is-open 属性，添加一个布尔变量以确定下拉列表是否打开，在列的点击回调中将其设置为 true...

https://angular-ui.github.io/bootstrap/

is-open $ (Default: false) - Defines whether or not the dropdown-menu is open. The uib-dropdown-toggle will toggle this attribute on click.