为什么 chart.js 不显示图表？

Question

我用 django 创建了一个简单的 Web 应用程序。我正在从后端 API 接收数据并使用 chart.js 将它们转换为图表，但我不知道为什么我的图表在放大或缩小之前不显示。 我的 JS： fetchStock()

function fetchStock(){
    labels = []
    price = []
    fetch('http://127.0.0.1:8000/api/stock_list?format=json')
    .then((resp) => resp.json())
    .then((data) => {
        

        console.log(data)

        data.forEach(function(task){
            console.log(task)
            labels.push(task.symbol)
            price.push(task.price)
        })
        console.log(labels)
    })

    var ctx = document.getElementById("myCanvas").getContext('2d');

    var chart = new Chart(ctx,{
    type:'bar',

        data: {
        labels: labels,
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: price,
        }]
    },
})
}

JSON： http://127.0.0.1:8000/api/stock_list?format=json

[{"id":1,"symbol":"AKPL","price":117},{"id":2,"symbol":"CBBL","price":120},{"id":3,"symbol":"LGIL","price":293}]

Answer 1

根据您的问题，您可以看到图表但需要放大或缩小权尝试将父 div 添加到画布它应该可以工作

<div class="chart_wrapper">
    <canvas width="600" height="250"></canvas>
</div>