C3图表未在反应项目中呈现

Question

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

我正在尝试按照使用 React 更新 C3 图表上的道具更改提供的示例 ，但是第一步，即创建图表，没有发生。

这是我的小提琴：

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。在这种情况下，将在初始加载时调用渲染，您<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>
    );
  }
}

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