如何以编程方式设置选择 Highchats 主从图表？答案

【问题标题】：How to programmatically set selection Highchats master-detail chart?如何以编程方式设置选择 Highchats 主从图表？
【发布时间】：2018-12-03 09:18:10
【问题描述】：

我按照 Highcharts 文档和以下示例创建了自己的主从图表：https://www.highcharts.com/demo/dynamic-master-detail

一切正常，但我想添加一个功能：加载图表时，应在主图表中自动选择最后 50 个数据点，从而显示在详细图表中。

我尝试手动触发选择事件，但没有成功。知道如何解决这个问题吗？

【问题讨论】：

您是否考虑过使用 stockCharts 代替； highcharts.com/stock/demo/basic-line ?它使管理缩放变得更加容易。如果这不适合您，您需要使用与选择事件相同的功能，并确保它只使用最后 50 个点。
你需要做这样的事情； jsfiddle.net/ewolden/52b40dg6/12。这只是使用选择事件功能的一种快速而混乱的方式。

标签： highcharts

【解决方案1】：

您可以在图表加载事件中触发selection 事件并设置正确的极值：

            chart: {
                ...
                events: {
                    load: function() {
                        var points = this.series[0].points,
                            xAxis = this.xAxis[0];

                        Highcharts.fireEvent(this, 'selection', {
                            xAxis: [{
                                min: points[points.length - 51].x,
                                max: points[points.length - 1].x
                            }],

                        });
                    },

                    selection: function(event) {
                        ...
                    }
                }
            }

现场演示：https://jsfiddle.net/BlackLabel/xy8qug9h/

API：https://api.highcharts.com/highcharts/chart.events.load

【讨论】：