谷歌甘特图未更新高度

问题描述

我正在使用Google的甘特图的react组件.图表数据是组件状态的一部分，我将根据用户操作对其进行更新.我正在根据行数计算甘特图高度，并将其作为height属性传递.

I am using the react component of Google's Gantt chart. The chart data is part of my component's state, I am updating it based on user action. I am calcuating the Gantt chart height based on the number of rows and pass this as the height prop.

<Chart
      chartType="Gantt"
      data={[columns, ...this.state.data_rows]}
      width="100%"
      height={(this.state.data_rows.length + 1) * 42}
      legendToggle
    />

不幸的是，似乎正在考虑对chartData道具进行更新，但是高度并未更新.

Unfortunately, it seems like the update to the chartData prop is considered, but the height is not updated.

我已经建立了一个沙箱来显示此内容:

I have built a sandbox to show this:

https://codesandbox.io/s/l59199w8zl

如果单击添加行"按钮，则会添加一行，但是高度保持不变.如何使甘特图按需增长?

If you click the "add row" button, a row is added, but the height remains constant. What can I do to make the Gantt chart grow as needed?

推荐答案

您应尝试更新SVG高度；我已修改代码以动态获取height并在添加行时设置SVG height.

You should try to update the SVG height;I have modified the code to get height dynamically and set SVG height whenever a row is added.

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>
    );
  }
}

这篇关于谷歌甘特图未更新高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！