Диаграмма Ганта Google не обновляет высоту - PullRequest
Новая
       7

Диаграмма Ганта Google не обновляет высоту

0 голосов
/ 24 января 2019

Я использую компонент реагирования диаграммы Ганта Google.Данные диаграммы являются частью состояния моего компонента, я обновляю их в зависимости от действий пользователя.Я вычисляю высоту диаграммы Ганта на основе количества строк и передаю это как height prop. 

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

К сожалению, похоже, что обновление для chartData prop рассматривается, новысота не обновляется.

Я построил песочницу, чтобы показать это:

https://codesandbox.io/s/l59199w8zl

Если вы нажмете кнопку «Добавить строку», строка будет добавлена, но высота останется постоянной,Что я могу сделать, чтобы диаграмма Ганта росла по мере необходимости?

1 Ответ

0 голосов
/ 24 января 2019

Вы должны попытаться обновить высоту 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>
    );
  }
}
...