首页 文章

第一次单击时,Highchart的高度呈现方式不同

提问于
浏览
0

我创建了一个在html中的图表对象内设置的高图,其高度和宽度的css设置为图表对象 . 在第一次渲染时,图表的初始高度为290px . 再次单击选项卡后,图表将被拉伸,高度为308px . 之后的每次其他点击都没有效果,也有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");
  }

1 回答

  • 0

    出于某种原因,当我在ViewDidLoad之前直接声明我的图表时,它可以工作 . 否则,如果我在ViewDidload中调用的addChart中声明它,则第一次绘制时渲染方式不同 .

相关问题