所以我在 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>
);
}
}
最佳答案
到目前为止我最接近的是改变这个:
<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 隐藏在屏幕外,但仍会呈现它。我还发现通过这种方式实现了良好的性能提升。
关于javascript - 当谷歌图表不可见时,它们的渲染效果很差?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34804256/