动态加载的图表数据未显示Chartjs React

insrf1ej 于 2022-11-23 发布在 Chart.js

关注(0)|答案(2)|浏览(155)

我创建了一个饼图来显示口袋妖怪捕获率。console.logs一开始工作正常，但随后它似乎继续运行，因此数据不再正确显示。props值是来自另一个组件的useState变量。
下面是我的代码：

const [captureRate, setCaptureRate] = useState();
// const [lossRate, setLossRate] = useState();

console.log("run");


    let capture=[];
    let notCapture=0;
    console.log((props.nameForRate));

    useEffect(() => {
    axios.get('https://pokeapi.co/api/v2/pokemon-species/'+(props.nameForRate)+'/')
    .then((res)=>{

      let data=res.data;

      capture[0] = data.capture_rate;
      capture[1] = 255 - (data.capture_rate);
    
      console.log(("it works " +capture));
      setCaptureRate(capture);

    });

    
    console.log("here it is again " + captureRate[0]);
    
  
   }, []);



return(
    <>
    <div className="componentInteriorDoughnut">
          {/* <h3>Chart 2: Doughnut Chart</h3> */}

          <div className="CaptureRate">
          <Doughnut 
          data={{
             
              labels: ['Captured', 'Not Captured'],
              datasets: [{
                  label: 'Capture Rate',
                  data: captureRate,
                  backgroundColor: [
                    'rgb(42, 157, 143)',
                    '#f1f1f1',
                   
                  ],
                
                  borderWidth: 0,
                //   borderRadius:10,
                  
            
                  
                  
              },

chart.js

来源：https://stackoverflow.com/questions/71856310/dynamically-loaded-chart-data-not-showing-chartjs-react

2条答案

按热度按时间

roqulrg31#

您可以尝试添加侦听器到特定的值更改，此函数将在每次状态更改时调用。而不是下面的代码

useEffect(() => {},[])

相反，如果你可以指定监听哪个变量，那么多个函数调用就可以避免了。

useEffect(() => {},[notCapture]);

在这种情况下，如果notCaputure变量发生任何更改，则仅触发函数

赞(0）回复(0）举报 2022-11-23

jpfvwuh42#

请检查以下代码。它可能会对您有所帮助。

const finalData = () => {
        return new Promise((resolve, reject) => {
            const data = {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My First dataset',
                    data: actionsListData.map(({ EditorId }) => EditorId)
                }]
            }
            resolve(data)
        })
    }

<ChartControl
            type={ChartType.Bar}
            datapromise={finalData()}
        />

详情请参阅以下链接
https://pnp.github.io/sp-dev-fx-controls-react/controls/ChartControl/

赞(0）回复(0）举报 2022-11-23

我来回答

动态加载的图表数据未显示Chartjs React

2条答案

相关问题

热门标签

最新问答