问题描述
我的状态根据传入的道具而变化,然后触发重建图表。但是,似乎发生的是,当我将鼠标悬停在图表上时,它会显示旧数据,或者消失的数据然后重新出现。
以下是显示问题的gif文件:https://imgur.com/a/SQbhi9p
这是我的图表代码:
static getDerivedStateFromProps(nextProps,prevstate) {
if (nextProps.pricesData !== prevstate.pricesData) {
return { pricesData: nextProps.pricesData };
} else {
return null;
}
}
componentDidMount() {
this.buildChart();
}
componentDidUpdate(prevProps) {
if (!_.isEqual(this.props.pricesData,prevProps.pricesData)) {
this.buildChart();
}
}
buildChart fn:
buildChart = () => {
let datasets = [];
if (this.state.pricesData) {
this.state.pricesData.forEach((set) => {
if (set.titel === "Competiors price") {
let obj = {};
obj.label = set.titel;
obj.backgroundColor = set.color;
obj.data = [0,set.price];
obj.tooltip = set.tooltip;
datasets.push(obj);
} else {
let obj = {};
obj.label = set.titel;
obj.backgroundColor = set.color;
obj.data = [set.price,0];
obj.tooltip = set.tooltip;
datasets.push(obj);
}
});
}
const myChart = new Chart(this.chartRef.current,{
type: "bar",data: {
labels: ["Change=","Competitor"],datasets: datasets,},options: {
legend: {
display: false,title: {
display: true,fontSize: 16,text: "Your estimated monthly costs",responsive: true,maintainAspectRatio: false,scales: {
xAxes: [
{
stacked: true,],yAxes: [
{
stacked: true,ticks: {
callback: function (value) {
return "€" + value;
},});
this.setState({ chart: myChart });
};
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)