谷歌甘特图不更新高度

Question

我正在使用 Google 甘特图的 react 组件。图表数据是我组件状态的一部分，我正在根据用户操作对其进行更新。我正在根据行数计算甘特图高度，并将其作为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

如果单击“添加行”按钮，则会添加一行，但高度保持不变。如何让甘特图按需增长？

Answer 1

您应该尝试更新 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>
    );
  }
}