Question

所以我在React应用程序中有一些页面，并且它们都是直接渲染的。在它们之间翻转只会更改哪些标记为display: none vs display: block。在其中一些中，我正在渲染Google Charts，如下所示：

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内时，会出现问题。初始加载中显示的那些看起来很好，但是隐藏的那些不是全宽的。它们看起来像这样：

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

我意识到当有人从一个页面点击到另一个页面时我可以重新渲染图表，但我不愿意。现在，从一个选项卡到另一个选项卡的单击运行非常快速和平滑，每次渲染图表都会降低它的速度。

有什么想法吗？

编辑：

这是我的代码选择显示哪一个：

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隐藏在屏幕外，但仍会呈现它。通过这种方式，我也看到了良好的性能提升。

Google图表在不可见时呈现效果不佳？

1 个答案: