Highchart 在第一次点击时呈现不同的高度答案

【问题标题】：Highchart renders differently for height on first clickHighchart 在第一次点击时呈现不同的高度
【发布时间】：2017-10-04 02:57:16
【问题描述】：

我创建了一个设置在 html 中的图表对象内的 highchart，并将高度和宽度的 css 设置为图表对象。在第一次渲染时，图表的初始高度为 290 像素。在我再次单击选项卡后，图表被拉伸并且高度为 308 像素。之后的每一次点击都没有效果，高度也为 308px。这是我的代码：

HTML：

  <div class="content">
    <chart class="chartContainer" [options]="myChart" type="chart" 
     style="display: block;">
    </chart>
  </div>

CSS：

    .chartContainer{
                      position: absolute;
                      height: 100%;
                      z-index: -1;
                      overflow-y: hidden;
                      background-color: rgba(244, 244, 244, 0.98);
                      padding-top: 25px;
                      padding-bottom: 30px;
                      margin: auto;
                    }

打字稿：

addChart(){

    this.myChart = {

      chart: {
        type: 'spline',
        backgroundColor: 'rgba(255, 255, 255, 0.0)',
        reflow: false
      },
      credits: {
        enabled: false
      },
      tooltip: { 
        enabled: false 
      },
      title: {
        text:""
      },
      responsive: false,
      xAxis: {
        tickInterval: 5
      },
      yAxis: {
        visible:false,
        resize: {
          enabled: false
        }
      },
      plotOptions: {
        series: {
            marker: {
              enabled: true,
              radius: 4,
              symbol: 'cicle'
            },
            lineWidth: 1,
               dataLabels: {
                enabled: true,
                color: '#8C88FF',
                 style: {
                    fontWeight: 'none',
                    textOutline: 'none',
                    fontSize: '15px',
                    fontFamily:'Trebuchet MS'
                }
            },
            enableMouseTracking: false
        }
      },
      series: [{
        showInLegend: false,  
        name: 'High',
        color: '#8C88FF',
        data: [[5, 120], [7, 140], [8, 135], [9, 120], [10, 120], 
              [12, 135], [15, 160],[20, 135],[21, 135], [22, 135]]
      }, 
      {
        showInLegend: false,  
        name: 'Low',
        color: '#8C88FF',
        data: [[5, 100], [7, 120], [8, 120], [9, 115], [10, 110], 
              [12, 125], [15, 140],[20, 130],[21, 125], [22, 125]]
      }]
    } 
    console.log("Chart created");
  }

【问题讨论】：

你能添加jsfiddle链接吗？我认为这个问题是因为父 div 有类 .content 不固定宽度和高度，但子 div 有属性 height : 100%
我试图在这里重现您的问题：jsfiddle.net/kkulig/t5n49n3x 但一切似乎都正常。当窗口大小发生变化时，Highcharts 会重新排列图表：api.highcharts.com/highcharts/chart.reflow 如果容器大小发生变化，图表将调整到最大可用空间。
我找到了解决方法，请查看我的回答，如果有人能解释原因，那就太好了，谢谢！

标签： angular typescript highcharts

【解决方案1】：

由于某种原因，当我在 ViewDidLoad 之前直接声明我的图表时，它可以工作。否则，如果我在 ViewDidload 中调用的 addChart 中声明它，它在第一次绘制时呈现不同。

【讨论】：