C3 图表未在 React 项目中呈现

Question

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

我正在尝试按照提供的示例进行操作，但创建图表的第一步并未发生。

这是我的 fiddle:

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 呈现之前生成的，因此图表无处可去。在 render() 中调用 this.renderChart()，您可以调用它 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 生命周期方法是这里的关键。这是从文档链接的方便图表：http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

C3 图表未在 React 项目中呈现

C3 chart not rendering in react project

javascript

reactjs

c3.js