chart.js数据在初始页面加载时不显示

aelbi1ox 于 2023-04-20 发布在 Chart.js

关注(0)|答案(1)|浏览(219)

我有一个图表在react使用chart.js这里是代码

function Bar() {
const [backendData, setBackendData] = useState([{}])
useEffect(() => {
        Axios.get('http://localhost:3001/get').then((response) =>{
          console.log(response.data)
          setBackendData(response.data)
        })
      }, [])
//const total = backendData[1].total;
//console.log(total)
// const NethEmpty = 30-total
//monday chart data
var nethkinData = {
    labels: backendData.map(time => time.time),
    datasets: [{
        data: backendData.map(total => 30 - (total.total)),
        label: "Empty parking spaces",
        fill: true,
        backgroundColor: "rgba(211,211,211,0.5)",
        borderColor: "rgb(211,211,211)"
    }]
}
// nethkin chart options
var nethkinOptions = {
        scales: {
            y: {
                suggestedMin: 0,
                suggestedMax: 30,
                ticks: {
                    color: 'Grey',
                },
                grid: {
                    display: true,
                }
            },
            x: {
                ticks: {
                    color: 'Grey',
                }
            },
        },
        animation: {
            y: {
              duration: 3000,
              from: 3000
            }
        },
        
}
useEffect(() => {
    // var test = document.getElementById("0").getContext('2d');
    // test.destroy();
    // monday chart
    
    var ctx = document.getElementById('nethkinChart').getContext('2d');
    let nethkinChartStatus = Chart.getChart("nethkinChart");
    if (nethkinChartStatus != undefined) {
        nethkinChartStatus.destroy();
    }
    var nethkinChart = new Chart(ctx, {
        type: 'line',
        data: nethkinData,
        options: nethkinOptions,
        
    });
}, [])
return (
    <>
        {/* browser tab title and icon */}
        <Head>
            <link rel="icon" href="/latech.ico"/>
            <title>Parking Statistics</title>
        </Head>
        
        <Sidebar pageWrapId={'page-wrap'} outerContainerId={'outer-container'}/>
        {/* navbar title */}
        <div className={lots.navbar}>
            <h2>Parking Statistics</h2>
        </div>
        {/* page content */}
        {/* bar charts */}
        {/* monday */}
        <div className={stats.chart}>
            <h2>Nethkin Stats</h2>
            <canvas id='nethkinChart'></canvas>
        </div>
    </>
)
    }
    export default Bar;

我的问题是，当我第一次加载页面的数据将不会在那里。而且，当我重新加载页面的数据将不会显示的数据只显示了当我改变图表从线到酒吧然后数据将在那里，直到我离开页面

chart.js

来源：https://stackoverflow.com/questions/75992865/chart-js-data-does-not-show-up-on-initial-page-load

1条答案

按热度按时间

oalqel3c1#

你的问题是，当nethkinData更新时，你的第二个useEffect钩子没有被调用，你应该把nethkinData计算到useMemo中，然后把它作为第二个useEffect的依赖数组添加进去。

const nethkinData = useMemo(() => {
  return {
    labels: backendData.map((time) => time.time),
    datasets: [
      {
        data: backendData.map((total) => 30 - total.total),
        label: "Empty parking spaces",
        fill: true,
        backgroundColor: "rgba(211,211,211,0.5)",
        borderColor: "rgb(211,211,211)",
      },
    ],
  };
}, [backendData]);
// ...
useEffect(() => {
  var ctx = document.getElementById("nethkinChart").getContext("2d");
  let nethkinChartStatus = Chart.getChart("nethkinChart");
  if (nethkinChartStatus != undefined) {
    nethkinChartStatus.destroy();
  }
  var nethkinChart = new Chart(ctx, {
    type: "line",
    data: nethkinData,
    options: nethkinOptions,
  });
}, [nethkinData]);

展开查看全部

赞(0）回复(0）举报 2023-04-20

我来回答

chart.js数据在初始页面加载时不显示

1条答案

相关问题

热门标签

最新问答