Question

我正在使用reactC3js模块创建折线图，而不是动态地加载y轴数据，y轴先接收发送的数据，然后再不更新并重新呈现该图

Answer 1

这是我为您做的一个例子。

演示：https://wkyw9xrj7k.codesandbox.io/

希望这会对您有所帮助。

import React from "react";
import ReactDOM from "react-dom";
import C3Chart from "react-c3js";
import "c3/c3.css";
import "./styles.css";

class App extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     chartData: {
      columns: [
       ["data1", 30, 200, 100, 400, 150, 250],
       ["data2", 50, 20, 10, 40, 15, 25]
      ]
    }
   };
 }


 //Dynamically change the X-axis value with random numbers..

 changeX = () => {
   let chartData = this.state.chartData;
   let newX = chartData.columns[0].map((n, i) => {
     return i > 0 ? (Math.random() * 100).toFixed(2) : n;
   });
   chartData.columns[0] = newX;
   this.setState({ chartData });
  };


 //Dynamically change the Y-axis value with random numbers similar to changeX. 

 changeY = () => {
   let chartData = this.state.chartData;
   let newY = chartData.columns[1].map((n, i) => {
     return i > 0 ? (Math.random() * 100).toFixed(2) : n;
   });
   chartData.columns[1] = newY;
   this.setState({ chartData });
 };

 render() {
   return (
     <div>
       <C3Chart data={this.state.chartData} />
       <button onClick={() => this.changeX()}>changeX</button>
       <button onClick={() => this.changeY()}>changeY</button>
     </div>
   );
 }
}

const mountNode = document.getElementById("root");
ReactDOM.render(<App />, mountNode);

我正在使用reactC3js模块加载图表，但我无法动态加载y轴

1 个答案: