javascript - C3 图表未在 React 项目中呈现

Question

我想在 React 中使用 c3 创建一个字符，稍后每秒更新一次。

我正在尝试按照提供的示例进行操作 Updating C3 charts on props change with React ，但第一步，即创建图表，并没有发生。

这是我的 fiddle :

https://jsfiddle.net/69z2wepo/227446/

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。

至于更新数据，可以将列数据本身移动到state，然后调用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>
    );
  }
}

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