javascript - 当谷歌图表不可见时，它们的渲染效果很差？

Question

所以我在 React 应用程序中有几个页面，它们都是立即渲染的。在它们之间翻转只会改变哪些标记为 display: none 与 display: block。在其中一些中，我正在渲染 Google 图表，如下所示:

export default class DailyAreaChart extends React.Component {
  render() {
    return (
      <div>
        <h2 className="sectionHeader">Earnings per Day</h2>
        <div id="dailyAreaChart" width="908" height="378"></div>
      </div>
    );
  }
  componentDidMount() {
    this.drawChart();
  }
  componentDidUpdate() {
    this.drawChart();
  }
  drawChart() {

    let areaData = [['Date', 'Earnings']];
    const data = this.props.data;
    const dates = this.props.dates;
    const niceDates = this.props.niceDates;

    dates.forEach((date, i) => {
      areaData.push([
        niceDates[i],
        Math.round(data[date]*100)/100,
      ]);
    });

    let graphData = google.visualization.arrayToDataTable(areaData);
    let chart = new google.visualization.AreaChart(document.getElementById('dailyAreaChart'));
    const options = {
      legend: 'none',
      height: 350,
      chartArea: {'width': '85%', 'height': '75%'},
      fontName: 'Roboto',
      colors: ['#0074D9'],
    }
    chart.draw(graphData, options);

  }
}

当图表最初呈现在 display: none div 内时，就会出现此问题。无论初始加载时显示的内容看起来都不错，但开始隐藏的内容都不是全 Angular 的。它们看起来像这样:

如果我尝试在选项中设置 width 属性，我可以将它们设置为全 Angular ，但我遇到了另一个问题。

我意识到当有人从一个页面点击到另一页面时我可以重新渲染图表，但我不想这样做。现在，从一个选项卡单击到另一个选项卡的运行速度非常快且流畅，每次渲染图形都会减慢速度。

有什么想法吗？

编辑:

这是我选择要显示的代码:

export default class Report extends React.Component {

  render() {
    return (
      <div>

        <div style={{display: (this.props.report==="Today")?"block":"none"}}>
          <Today />
        </div>

        <div style={{display: (this.props.report==="Daily")?"block":"none"}}>
          <Daily />
        </div>

      </div>
    );
  }
}

Answer 1

到目前为止我最接近的是改变这个:

<div style={{display: (this.props.report==="Today")?"block":"none"}}>
   <Today />
</div>

对此:

<div style={(this.props.report==="Today")?{}:{position: "absolute",top: -99999,padding:"10px"}}>
   <Today />
</div>

这会将 div 隐藏在屏幕外，但仍会呈现它。我还发现通过这种方式实现了良好的性能提升。