Plotly.js与Angular如何自动调整等值线

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
      }
    ];
  }

有人可以给我一些见解吗？