如何使用 chart.js 在气泡图中使用反应挂钩

Question

每当我们点击添加按钮时，我都在尝试在图表中添加新气泡我能够更新数据状态，即使用 usestate 挂钩的图表数据，但图表不会重新呈现并且不会显示图表根据新更新的数据。

const data = 
{
  datasets: [{
      label: 'Grapefruit',
      data: [{
        x: 10,
        y: 40,
        r: 40
      }
    ],
      backgroundColor: 'rgb(255, 99, 132)'
    },
  {
    label: 'Lime',
    
    data: [{
      x: 23,
      y: 37,
      r: 40
    }    
  ],
    backgroundColor: 'rgb(0, 152, 102)'
  }
 ]
};

const  App = () => {

 
  const [chartData, setchartData] = useState(data);

   
   function callingChart(inputText,value)
   {
        
        const newl = [{x: data.datasets[1].data[0].x + l,y:data.datasets[1].data[0].y+ l,r:data.datasets[1].data[0].r + l}]
        data.datasets.push({ label: inputText,
        data: newl,
        backgroundColor: 'rgb(255, 128, 0)'})
               
     setchartData(data);          
      
    }     
   return (
    
      <div className ="bubble">  
           <BarChart data={chartData} options={options}/>
      </div>
  
  );
}

export default App;

我不知道我做错了什么。

Answer 1

据我所知，你正在改变 data 对象，它是对你初始化 chartData 状态的同一个对象的引用，然后保存变异的 data对象回到 chartData 状态。

在 React 中，您必须浅复制所有正在更新的状态。从当前 chartData 状态创建一个 newChartData 对象并浅拷贝根属性，然后通过浅拷贝前一个状态的状态声明一个 new datasets 数组datasets数组。这是一个新的数组引用，您可以将新值推入其中。

function callingChart(inputText, value) {
  const newChartData = {
    ...chartData, // shallow copy chartData object
    datasets: chartData.datasets.slice(), // shallow copy datasets array
  }

  if (value === "lime") {
    const newl = [
      {
        x: chartData.datasets[1].data[0].x + l,
        y: chartData.datasets[1].data[0].y + l,
        r: chartData.datasets[1].data[0].r + l
      }
    ];
    newChartData.datasets.push({
      label: inputText,
      data: newl,
      backgroundColor: "rgb(255, 128, 0)"
    });

    l--;
  } else if (value === "coconut") {
    const newc = [
      {
        x: chartData.datasets[2].data[0].x + c,
        y: chartData.datasets[2].data[0].y + c,
        r: chartData.datasets[2].data[0].r + c
      }
    ];

    newChartData.datasets.push({
      label: inputText,
      data: newc,
      backgroundColor: "rgb(255, 128, 0)"
    });

    c--;
  } else if (value === "grapefruit") {
    const newg = [
      {
        x: chartData.datasets[0].data[0].x + g,
        y: chartData.datasets[0].data[0].y + g,
        r: chartData.datasets[0].data[0].r + g
      }
    ];

    newChartData.datasets.push({
      label: inputText,
      data: newg,
      backgroundColor: "rgb(255, 128, 0)"
    });

    g--;
  } else {
    const newm = [
      {
        x: chartData.datasets[3].data[0].x + m,
        y: chartData.datasets[3].data[0].y + m,
        r: chartData.datasets[3].data[0].r + m
      }
    ];
    newChartData.datasets.push({
      label: inputText,
      data: newm,
      backgroundColor: "rgb(255, 128, 0)"
    });

    m--;
  }

  setchartData(newChartData);

  console.log(newChartData);
}

如何使用 chart.js 在气泡图中使用反应挂钩

How to use react hook in Bubble chart using chart.js

javascript

bubble-chart

reactjs

chart.js2

react-hooks