[英]Google gantt chart not updating height
我正在使用谷歌甘特图的反应组件。 图表数据是我组件状态的一部分,我正在根据用户操作更新它。 我正在根据行数计算甘特图高度,并将其作为height
道具传递。
<Chart
chartType="Gantt"
data={[columns, ...this.state.data_rows]}
width="100%"
height={(this.state.data_rows.length + 1) * 42}
legendToggle
/>
不幸的是,似乎考虑了对chartData
道具的更新,但没有更新高度。
我已经建立了一个沙箱来展示这一点:
https://codesandbox.io/s/l59199w8zl
如果单击“添加行”按钮,则会添加一行,但高度保持不变。 我该怎么做才能使甘特图根据需要增长?
您应该尝试更新 SVG 高度; 我修改了代码以动态获取height
并在添加行时设置SVG height
。
https://codesandbox.io/s/7jy25q8mj
class App extends React.Component {
state = {
data_rows: [
[
"Research",
"Find sources",
new Date(2015, 0, 1),
new Date(2015, 0, 5),
null,
100,
null
],
[
"Write",
"Write paper",
null,
new Date(2015, 0, 9),
daysToMilliseconds(3),
25,
"Research,Outline"
],
[
"Cite",
"Create bibliography",
null,
new Date(2015, 0, 7),
daysToMilliseconds(1),
20,
"Research"
],
[
"Complete",
"Hand in paper",
null,
new Date(2015, 0, 10),
daysToMilliseconds(1),
0,
"Cite,Write"
],
[
"Outline",
"Outline paper",
null,
new Date(2015, 0, 6),
daysToMilliseconds(1),
100,
"Research"
]
]
};
onAddRow() {
let newState = Object.assign({}, this.state);
newState.data_rows.push([
"Task" + newState.data_rows.length,
"Some new task",
null,
new Date(2015, 0, 6),
daysToMilliseconds(1),
100,
"Research"
]);
this.data_rows++;
this.setState(newState);
}
getHeight() {
if (document.getElementsByTagName("svg")[0]) {
document
.getElementsByTagName("svg")[0]
.setAttribute("height", (this.state.data_rows.length + 1) * 42);
document
.getElementsByTagName("svg")[1]
.setAttribute("height", (this.state.data_rows.length + 1) * 42);
}
return (this.state.data_rows.length + 1) * 42;
}
render() {
return (
<div className="App">
<span
style={{ backgroundColor: "#0f0", cursor: "pointer" }}
onClick={() => this.onAddRow()}
>
add row
</span>
<div id="chart_div">
<Chart
chartType="Gantt"
data={[columns, ...this.state.data_rows]}
width="100%"
height={this.getHeight()}
legendToggle
/>
</div>
<div>
</div>
</div>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.