Question

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

Answer 1

您可以在图表上使用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：DEMO

的第一个按钮

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

修改

正如Sebastian Bochan所述，您可以使用afterSetExtremes和setExtremes事件，它会检查每个更改图表范围的操作，包括entering a date or dragging the cursor to select a date range。

但不利的一面是当你使用导航器的dragging时，因为它不会等到你释放鼠标按钮并触发范围内每个点变化的事件。如果您不介意，那么它将是一个很好的解决方案：DEMO

Answer 2

您可以抓住setExtremes / afterSetExtremes

Answer 3

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

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

StockChart的highcharts事件处理程序

4 个答案: