Highcharts独立Navigator双指缩放不同步问题求助

在使用Highcharts Navigator时出现以下差异：

• 通过图表配置的navigator属性创建导航器时，双指缩放图表会同步更新导航器的显示范围
• 通过Highcharts.navigator()方法独立创建导航器并调用bind()绑定图表后，双指缩放仅改变图表显示范围，导航器无同步变化

异常示例代码 #

const navigator = Highcharts.navigator('navigator-container', {
    series: [{
        data: 
        [[1698351117000, 5.4756274], [1698350210000, 5.5807543], [1698347057000, 3.8524187], [1698342736000, 5.6175838], [1698338416000, 4.760621], [1698334085000, 4.102468], [1698329764000, 5.0720615], [1698325444000, 4.331846], [1698321118000, 4.8415008], [1698316798000, 5.3565307], [1698312477000, 4.178764], [1698308156000, 4.48355], [1698303836000, 5.17725], [1698299515000, 4.044917], [1698295195000, 4.551956], [1698290875000, 4.9452486], [1698286555000, 4.0260453], [1698282234000, 4.53299], [1698277914000, 5.0122814], [1698273594000, 4.4838605], [1698269273000, 4.4652667]]
        }]
});
const chart1 = Highcharts.chart('chart-container', 
{ "chart" : { marginTop:70, "zoomType" : "x",
  panning: false, pinchType: ''
, "height": 292.5 }, time: { timezoneOffset: 240 }, 
"series" : [ { lineWidth: 1, states: { hover: { lineWidth: 1 }  }, "data" :[[1698351117000, 5.4756274], [1698350210000, 5.5807543], [1698347057000, 3.8524187], [1698342736000, 5.6175838], [1698338416000, 4.760621], [1698334085000, 4.102468], [1698329764000, 5.0720615], [1698325444000, 4.331846], [1698321118000, 4.8415008], [1698316798000, 5.3565307], [1698312477000, 4.178764], [1698308156000, 4.48355], [1698303836000, 5.17725], [1698299515000, 4.044917], [1698295195000, 4.551956], [1698290875000, 4.9452486], [1698286555000, 4.0260453], [1698282234000, 4.53299], [1698277914000, 5.0122814], [1698273594000, 4.4838605], [1698269273000, 4.4652667]], color: "#003399", "name" : " ", cropThreshold: 9999 } ], plotOptions: { series: {  point: { events: { select: function () {var date = new Date(this.x).toLocaleString("en-US", {timeZone: "America/New_York", weekday:"short", year:"numeric", month:"short", day:"numeric", hour:"2-digit", minute:"2-digit", second:"2-digit", hourCycle: 'h23'}); var text = date + '</br>' + Highcharts.numberFormat(this.y, 4); var chart = this.series.chart; if (!chart.lbl) { chart.lbl = chart.renderer.label(text, 75, 7).attr({ padding: 10,r: 5,zIndex: 0 }).css({color: 'red'}).add();} else {chart.lbl.attr({text: text}); } } , click: function (event) { this.select(!this.selected, false); } } }, marker: { enabled: true, radius: 0.1,  states: { select: { fillColor: 'red', lineWidth: 0, radius: 4  }, hover: { fillColor: '#4da6ff', lineWidth: 1, radius: 6 } } } } }, "title" : { "text" : " Overall " },  "legend" : { "enabled" : false },"yAxis" : [ { min:0, max: 6.6,  "title" : { "text" : " in/s - Peak " } ,"plotLines": [{ "color": "red", "width": 2, "dashStyle": "dash", "value": 0.05, "label": { "text": "Low Fault", "align": "right"} },{ "color": "orange", "width": 2, "dashStyle": "dash", "value": 0.1, "label": { "text": "Low Alert", "align": "right"} },{ "color": "orange", "width": 2, "dashStyle": "dash", "value": 0.2, "label": { "text": "High Alert", "align": "right"} },{ "color": "red", "width": 2, "dashStyle": "dash", "value": 6.0, "label": { "text": "High Fault", "align": "right"} }] } ],
"xAxis": [{  
    "title": { "text": " Time " }, "type": "datetime" } ],tooltip: { positioner: function() { return { x: this.chart.plotSizeX-135, y: this.chart.plotTop-45 }; }, formatter() { return new Date(this.x).toLocaleString("en-US", { timeZone: "America/New_York", weekday:"short", year:"numeric", month:"short", day:"numeric", hour:"2-digit", minute:"2-digit", second:"2-digit", hourCycle: 'h23'}) +'</br>' + Highcharts.numberFormat(this.y, 4)},shared: true, shadow: false, borderWidth: 0, backgroundColor: "rgba(255,255,255,0.8)" } }
);
navigator.bind(chart1);

正常示例代码 #

Highcharts.chart('container', 
{ "chart" : { "zoomType" : "x" , "height": 242, events: { load() { updateRemoveWindowDetails() } } }, "series" : [ { lineWidth: 1, states: { hover: { lineWidth: 1 }  }, "data" :[[0, 0.0], [0.610625, 0.0], [1.22125, 0.0], [1.831875, 0.0], [2.4425, 0.0], [3.053125, 0.0], [3.66375, 0.0037346934], [4.274375, 0.0030611916], [4.885, 0.010295773], [5.495625, 0.0051708585], [6.10625, 0.004432384], [6.716875, 0.007558804], [7.3275, 0.0114836], [7.938126, 0.009008419], [8.54875, 0.0022787983], [9.159375, 0.007963747], [9.77, 0.008420735], [10.380626, 0.006831052], [10.991251, 0.0031896743], [11.601875, 0.003593808], [12.212501, 0.0042171995], [12.823126, 0.0032372714], [13.43375, 0.0023183753]]
, color: "#003399", "name" : " " } ], "title" : { "text" : "Fri, Oct 13, 2023, 23:24:20" },plotOptions: { series: { point: { events: { select: function () { var text = 'Ampl: ' + Highcharts.numberFormat(this.y, 4) + '</br>' + 'Freq: ' + Highcharts.numberFormat(this.x, 4); var chart = this.series.chart; if (!chart.lbl) { chart.lbl = chart.renderer.label(text, 75, 7).attr({ padding: 10,r: 5,zIndex: 0 }).css({color: 'red'}).add();} else {chart.lbl.attr({text: text}); } }  , click: function (event) { this.select(!this.selected, false); } } }, marker: { enabled: true, radius: 0.1, states: { select: { fillColor: 'red', lineWidth: 0, radius: 4  }, hover: { fillColor: '#4da6ff', lineWidth: 1, radius: 6 } } } } }, "legend" : { "enabled" : false },"yAxis" : [ { type: "logarithmic" , minorTickInterval: 0.1 , "title" : { "text" : " Gs - Peak-to-Peak " }  } ],"xAxis": [{ min:0, "title": { "text": " Hz " }, "type": "none"    } ],tooltip: { formatter: function(){ return 'Ampl: ' + Highcharts.numberFormat(this.y, 4) + '</br>' + 'Freq: ' + Highcharts.numberFormat(this.x, 4) }, positioner: function() { return { x: this.chart.plotSizeX-120, y: this.chart.plotTop-45 }; }, shared: true, shadow: false, borderWidth: 0, backgroundColor: "rgba(255,255,255,0.8)" }  ,
navigator: {
margin:10, enabled: true ,xAxis: {
type: 'linear', labels: { formatter: function() { return Highcharts.numberFormat(this.value); } } } }, 
scrollbar: { enabled: true }} 
);

解决方案 #

独立创建的导航器与图表之间没有内置的极值同步逻辑，需要手动监听图表x轴的afterSetExtremes事件，在事件触发时同步更新导航器的x轴范围：

在绑定导航器之后添加以下代码：

// 监听图表x轴极值变化事件
chart1.xAxis[0].on('afterSetExtremes', function(e) {
    // 同步更新导航器的x轴极值，第三个参数false表示不触发导航器的事件循环，避免重复同步
    navigator.xAxis[0].setExtremes(e.min, e.max, false);
});

若需要导航器拖动时同步图表，也可以监听导航器的afterSetExtremes事件反向同步：

navigator.xAxis[0].on('afterSetExtremes', function(e) {
    chart1.xAxis[0].setExtremes(e.min, e.max, false);
});

这样就能实现双指缩放图表时，导航器同步更新显示范围。

内容的提问来源于stack exchange，提问作者Gopal Singh