javascript - Angular を使用した Plotly.js でコロプレスのサイズを自動的に変更する方法

Question

Angular 6 で Plotly.js を使用して、自動的にサイズ変更され、応答するコロプレスを表示しようとしています。静的な幅や高さを設定したくありません。コロプレスをdivに自動的に合わせるにはどうすればよいですか?

プロットはフル サイズに拡大しているように見えますが、マップ自体はそうではありません。

Plotly.restyle 関数を使用しようとしましたが、成功しませんでした。現在のコードは次のとおりです。

  @ViewChild('chart') el: ElementRef;
  @HostListener('window:resize')
  onResize() {
    if (this.element) {
      Plotly.Plots.resize(this.element);
    }
  }

コロプレスを初期化するためのコードは次のとおりです。

  private plot() {
    this.element = this.el.nativeElement;
    Plotly.plot(this.element, this.data, this.style, this.config);
    Plotly.Plots.resize(this.element);
  }

  private get style(): any {
    return {
      autosize: true,
      title: this.title,
      geo: {
        showframe: false,
        showcoastlines: true,
        projection: {
          type: 'mercator'
        }
      }
    };
  }

  private get data(): any {
    const countries = this.markers.map(marker => marker.country);
    return [
      {
        type: 'choropleth',
        locations: countries,
        z: this.markers.map(marker => marker.value),
        text: countries,
        autocolorscale: false,
        reversescale: true,

        marker: {
          line: {
            color: 'rgb(255,255,255)',
            width: 0.3
          }
        },
        showscale: false
      }
    ];
  }

誰かが私にこれについての洞察を教えてもらえますか?