Question

我想在React中使用c3创建一个char，稍后再进行更新。

我正在尝试遵循以下提供的示例 Updating C3 charts on props change with React，但是创建图表的第一步并未实现。

这是我的小提琴：

import c3 from 'c3';
import React from "react";
import ReactDOM from "react-dom";

class Hello extends React.Component {

  renderChart() {
        this.chart = c3.generate({
            bindto:"#chart1",
            data: {
                columns: [
                    ['data1', 30, 200, 100, 400, 150, 250],
                    ['data2', 50, 20, 10, 40, 15, 25]
                ]
            }
        });
    }



  render() {

    this.renderChart()

    return <div id="chart1"></div>;
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

我用npm安装了c3，并将其导入组件中。

感谢您的帮助。

Answer 1

在您的示例中，看起来图表甚至在选择器div呈现之前就已生成，因此图表无处可去。您可以将其命名为this.renderChart()，而不必在render()中调用componentDidMount。在这种情况下，将在初始加载时调用render，将渲染<div id="chart1"></div>，然后运行renderChart，将SVG添加到div。

关于更新数据，您可以将列数据本身移动到状态，然后使用一些新数据调用setState并使用componentDidUpdate重新呈现图表。可能看起来像这样：

class Chart extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      column1: ['data1', 30, 200, 100, 400, 150, 250],
      column2: ['data2', 50, 20, 10, 40, 15, 25],
    };

    this.changeData = this.changeData.bind(this);
  }

  renderChart() {
    c3.generate({
      bindto: "#chart1",
      data: {
        columns: [this.state.column1, this.state.column2],
      },
    });
  }

  componentDidMount() {
    this.renderChart();
  }

  componentDidUpdate() {
    this.renderChart();
  }

  // Changes data to something arbitrary on button click
  changeData() {
    this.setState({
      column1: ['data1', 70, 120, 30, 300, 230, 300],
      column2: ['data2', 100, 120, 50, 140, 150, 80],
    });
  }

  render() {
    return (
      <div>
        <div id="chart1"></div>
        <button onClick={this.changeData}>Change</button>
      </div>
    );
  }
}

反应生命周期方法在这里很关键。这是文档链接的便捷图表：http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

C3图表未在React项目中呈现

1 个答案: