Highcharts + Highslide:当打开一个新的高滑动弹出窗口或点击其他任何地方时,关闭所有先前打开的弹出窗口

时间:2013-04-04 20:58:23

标签: javascript jquery highcharts highslide

所以,我发现当你使用高位滑块连同高图数据时,可以不断点击新数据点并弹出无数个模态窗口。如果您打开一个新的高滑道,或者如果您在屏幕上或过滤器上点击其他任何位置,我想构建一个可以关闭现有高滑动弹出窗口的东西。

我写了这个小函数并将其添加到我的开头语句中,但它没有用。

<body onclick="javascript:parent.window.hs.close();">

以下是我的完整示例: 问题是,有人能告诉我一个我可以完成上述行为的例子吗?

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
            title: {
                text: 'Q1 Eanings and Outlook Forecast',
                x: -100
            },
            subtitle: {
                text: 'professional',
                x:-100
            },
            xAxis: {
                title: {
                    enabled: false,
                    text: 'Future Outlook'
                },
                labels:{formatter: function() {}  },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    enabled:false,
                    text: 'Current Quarter'
                },
                    labels: {
        formatter: function() {
            //return this.value + ' ';
        }
    },

            },
           legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
           //     x: 100,
                y: 70,
                floating: false,
                backgroundColor: '#FFFFFF',
                borderWidth: 1
            },            

                        load: function() {
                var legend = $('#container .highcharts-legend');
                var x = legend.position().left;
                var y = legend.position().top - (this.chartHeight - this.plotTop - this.plotHeight - this.options.chart.spacingBottom);

                legend.attr({
                    transform: 'translate(' + x + ',' + y + ')'
                });
            },

            plotOptions: {
                scatter: {
                    marker: {
                        radius: 5,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: true
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>{series.name}:</b><br>',
                        pointFormat: '{point.hover}<br><br><b>Current Q: </b>{point.y}/100<br><b>Outlook: </b>{point.x}/100<br><br><div style="text-align:center;">(click for more detail)</div>'
                    },



    cursor: 'pointer',
            point: {
                events: {
                        click: function(event) {
                            hs.htmlExpand(null, {
                                pageOrigin: {
                                    x: this.pageX,
                                    y: this.pageY
                                },
                                headingText: this.ticker,
                                maincontentText: '<b>Detail:</b> ' + this.info,
                                width: 250
                            });


                                hs.Expander.prototype.onBeforeClose = function(sender) {

}                   


                        },



                }
            },

                        events: {
                legendItemClick: function(event) {

                    if (!this.visible)
                        return true;

                    var seriesIndex = this.index;
                    var series = this.chart.series;
                    for (var i = 0; i < series.length; i++)
                    {
                        if (series[i].index != seriesIndex)
                        {
                            series[i].visible ? series[i].hide() : series[i].show();
                        } 
                    }


                    return false;
                }


            },






                }
            },





                    series: [{
                    name: 'Weak Outlook (24)',color: 'red',data: [
            {x: 40,y:10,ticker:'Michael Kors: (KORS)',info: 'O,.pyjxkne<br>1Q xjkxqs', hover:'Gtext<br>1Qlotatt<br><a href="">read more</a>'},
            {x: 20,y:50,ticker:'Soeuoeuoeu',info:'Doeuoeuoeull...<br><br><a href="">read more</a>'},
            {x:0,y:0,ticker:'Zynga: (ZNGA)'},
            {x:3,y:4,ticker:'Avid: (AVID)'},
            {x:30,y:10,ticker:'JCPenny: (JCP)'},
            {x:29,y:25,ticker:'Deckers Outdoor: (DECK)'},
            {x:25,y:5,ticker:'Zynga: (ZNGA)'},
            {x:6,y:34,ticker:'Avid: (AVID)'},
            {x:8,y:27,ticker:'JCPenny: (JCP)'},
            {x:14,y:35,ticker:'Deckers Outdoor: (DECK)'},
            {x:35,y:23,ticker:'Nutrisystem Corp: (NTRI)'},
            ]},



            {name:'Strong Outlook (25)',color:'green',data:[
        {x:100,y:100,ticker:'The Gap: (GPS)'},
        {x:72,y:82,ticker:'Sodastream Intl: (SODA)'},
        {x:82,y:74,ticker:'Under Armour: (UA)'},
        {x:71,y:90,ticker:'Intuitive Surgical: (ISRG)'},
        {x:88,y:69,ticker:'McDonalds: (MCD)'},
        {x:95,y:87,ticker:'Lumber Liquidators: (LL)'},
        {x:77,y:91,ticker:'Apple: (AAPL)'},
        {x:96,y:78,ticker:'Walgreen Company: (WAG)'},       {x:100,y:100,ticker:'The Gap: (GPS)'},
        {x:73,y:72,ticker:'Sodastream Intl: (SODA)'},
        {x:84,y:74,ticker:'Under Armour: (UA)'},
        {x:91,y:80,ticker:'Intuitive Surgical: (ISRG)'},
        {x:68,y:93,ticker:'McDonalds: (MCD)'},
        {x:95,y:67,ticker:'Lumber Liquidators: (LL)'},
        {x:76,y:67,ticker:'Apple: (AAPL)'},
        {x:79,y:84,ticker:'Walgreen Company: (WAG)'},

        ]},


        {name:'Inline Company Performance (23)',color:'darkgrey',data:[
        {x:40,y:44,ticker:'GIII'},
        {x:53,y:43,ticker:'BNNY'},
        {x:55,y:49,ticker:'SNE'},
        {x:57,y:58,ticker:'WTW'},
        {x:60,y:60,ticker:'LULU'},
        {x:70,y:66,ticker:'FB'},
        {x:51,y:24,ticker:'GIII'},
        {x:45,y:26,ticker:'FB'},
        {x:43,y:53,ticker:'BNNY'},
        {x:47,y:59,ticker:'SNE'},
        {x:51,y:48,ticker:'WTW'},
        {x:56,y:40,ticker:'LULU'},
        {x:59,y:52,ticker:'FB'},
        {x:0,y:100,ticker:'Nutrisystem Corp: (NTRI)'},
        ]},




        ]



        });
    });

1 个答案:

答案 0 :(得分:1)

如果allowMultipleInstances设置为false,则当您单击打开另一个时,打开的扩展器将关闭。在包含的highslide.config.js文件后添加此文件:

<script type="text/javascript">
   hs.allowMultipleInstances = false;
</script>