【问题标题】:How to set reset zoom button and title to exactly center of the high charts如何将重置缩放按钮和标题设置为高图表的中心
【发布时间】:2021-04-07 05:33:58
【问题描述】:

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

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

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

预期图表前景:

谁能帮我解决?

【问题讨论】:

    标签: charts highcharts highcharts-ng angular2-highcharts


    【解决方案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

    【讨论】:

    猜你喜欢
    • 2018-01-14
    • 2016-04-26
    • 1970-01-01
    • 2019-03-11
    • 2021-09-18
    • 1970-01-01
    • 2015-03-04
    • 2019-01-09
    • 2021-06-06
    相关资源
    最近更新 更多