我正在使用 reactC3js 模块加载图表,但我无法动态加载 y 轴
I am using reactC3js module to load a chart an I am not able to load y axis dynamically
我正在使用 reactC3js 模块来创建折线图而不是 avle 来动态加载 y 轴数据,y 轴首先接收发送的数据,之后它不会更新和重新呈现图表
这是我为你做的一个例子。
https://codesandbox.io/s/wkyw9xrj7k
演示: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 模块来创建折线图而不是 avle 来动态加载 y 轴数据,y 轴首先接收发送的数据,之后它不会更新和重新呈现图表
这是我为你做的一个例子。
https://codesandbox.io/s/wkyw9xrj7k
演示: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);