Highchart -- 设置chart高度为宽度的一半和取消resize 时的默认reflow事件

296 阅读1分钟

设置chart高度为宽度的一半

分析:

  1. 一开始的想法是监听resize 事件 拿到当前宽度 再设置高度 再次reflow chart
  2. 后来发现官网的这段描述:如果给定一个百分比字符串(例如“56%”),则高度以实际图表宽度的百分比表示。这允许在响应尺寸上保持纵横比。 当height设置为百分比时,chart 的高度是由宽度决定的

结论:可以通过以下实现:

chart: {
        height: '50%' 
    }

为了使图按照自己设定的画,为了防止重复画图 ,取消resize 时的默认reflow事件:

分析:先取消自动画图 再 手动调用画图

结论:

  chart: {
        reflow: false
    },
    -----------------------------------------
    resize(){
    this.chart.reflow()
    }
    

参考API:

api.highcharts.com/highcharts/…

api.highcharts.com/highcharts/…