如何在点击角度高位图时打开ui-bootstrap下拉列表

时间:2016-08-19 11:57:09

标签: angularjs highcharts angular-ui-bootstrap

这是我传递给highchart指令并在单击highchart列时获取click事件的配置对象,现在点击我要打开下拉列表的高亮图的任意列:

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

1 个答案:

答案 0 :(得分:3)

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

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

  

is-open $(默认值:false) - 定义下拉菜单是否打开。 uib-dropdown-toggle将在点击时切换此属性。