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

Question

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

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

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

预期图表前景：

谁能帮我解决？

Answer 1

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

  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