股票图表的高图表事件处理程序

Question

我在看 http://api.highcharts.com/highstock#chart.events。我希望事件处理程序在日期范围发生变化时捕获事件。对于日期中的所有更改，都应捕获日期中的此更改。例如，当单击范围选择器中的按钮或使用日期选择器输入日期时，或者由于日期范围的变化而在图表中发生任何其他更改时。我需要Highcharts.dateFormat（'%Y-%m-%d'，event.xAxis[0].min） 和 Highcharts.dateFormat（'%Y-%m-%d'， event.xAxis[0].max） 值传递给事件处理程序。这是为了显示一个附加图表，其中包含已选择的新日期范围。问候约瑟夫

Answer 1

你可以抓住 setExtremes/afterSetExtremes

Answer 2

您可以使用图表上的 load 事件，然后为rangeSelector按钮定义处理程序：

chart : {
            events: {
                load: function () {
                    var chart = this;
                    var buttons = this.rangeSelector.buttons;
                    buttons[0].on('click', function (e) {
                        alert(Highcharts.dateFormat('%Y-%m-%d',chart.xAxis[0].min));
                        alert(Highcharts.dateFormat('%Y-%m-%d',chart.xAxis[0].max));
                    });
                }
            }
        }

这是rangeSelector的第一个按钮：演示

然后，您可以为所有按钮添加处理程序

编辑：

正如塞巴斯蒂安·博尚所说，您可以使用afterSetExtremes和setExtremes事件，它会检查更改图表范围的每个操作，包括entering a date or dragging the cursor to select a date range。

但缺点是当您使用导航器的dragging时，因为它不会等到您释放鼠标按钮并触发范围内每个点更改的事件。如果您不介意，那么这对您来说将是一个很好的解决方案：演示

Answer 3

感谢您回答我的问题我试图将输入发送到我在同一页面上的股票图表上的第二个图表。我需要 x 轴坐标，如果股票图表的日期选择器有任何更改，我将它作为表单元素提供给我的第二个图表。我使用以下代码作为我的解决方案。

chart: {
                            events: {
                                redraw: function (e) {
                                    fromDateStockChart=Highcharts.dateFormat('%Y-%m-%d',this.xAxis[0].min);
                                    toDateStockChart=Highcharts.dateFormat('%Y-%m-%d',this.xAxis[0].max);
                                    /*console.log('fromDateStockChart='+fromDateStockChart
                                            +' toDateStockChart'+toDateStockChart);*/
                                            form = document.searchFilters;
                                            form.date_from.value = fromDateStockChart;
                                            form.date_to.value = toDateStockChart;
                                }
                            }
                        }

问候约瑟夫

Answer 4

你应该看这个例子 http://jsfiddle.net/ag2a5q4w/1/

 $('#container').highcharts('StockChart', {
        xAxis : {
            events: {
                afterSetExtremes: function () {
                        alert(Highcharts.dateFormat('%Y-%m-%d',this.min));
                        alert(Highcharts.dateFormat('%Y-%m-%d',this.max));
                }
            }
        },
        rangeSelector : {
            selected : 1
        },
        title : {
            text : 'AAPL Stock Price'
        },
        series : [{
            name : 'AAPL',
            data : data,
            tooltip: {
                valueDecimals: 2
            }
        }]
    })