如何将重置缩放按钮和标题设置为高图的准确中心

如何解决如何将重置缩放按钮和标题设置为高图的准确中心

我正在尝试将重置缩放按钮和标题设置为高图的准确中心。这里的标题是图表部分的选定时间范围。我需要根据屏幕分辨率将其设置为动态居中。

chart:{
  zoomType:'x',resetZoomButton:{
    position:{
      verticalAlign:'top'
    },relativeto:'chart'
  },events:{
    selection:function(event){
      this.setTitle({{text:selectedChartPortion,useHtml:true}})
    }
  }
}

这里的 text:selectedChartPortion 是一个 span 标签，它有一些样式属性和选定的值。

预期图表展望：

谁能帮我解决这个问题？

解决方法

我认为这个配置应该可以帮助你达到想要的效果：

  xAxis: {
    events: {
      afterSetExtremes() {
        const chart = this.chart;
        const resetZoomButton = chart.resetZoomButton;
        const padding = 5;

        if (resetZoomButton) {
          chart.title.translate(-chart.title.getBBox().width / 2 - padding,0)
          resetZoomButton.translate(chart.plotWidth / 2 + resetZoomButton.getBBox().width / 2 + padding,0)
        } else {
          chart.title.translate(chart.title.getBBox().width / 2 + chart.title.translateX,0)
        }
      }
    }
  }

演示：https://jsfiddle.net/BlackLabel/8yjd9orx/

API：https://api.highcharts.com/highcharts/chart.resetZoomButton.position.align

API：https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes