Question

我创建了一个在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");
  }

Answer 1

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

高级图表在第一次点击时对高度的呈现方式不同

1 个答案: