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

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

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

How to set reset zoom button and title to exactly center of the high charts

charts

highcharts

highcharts-ng

angular2-highcharts