如何使 chartjs 饼图响应

Question

我无法通过 chartJs 制作饼图响应，当屏幕达到移动尺寸时，图表变得不可见。下面是我的 html 代码。

<canvas id="MyPieChart" width="200" height="200" ></canvas>

这是js代码

    var ctx = document.getElementById("MyPieChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'pie',
        
        // The data for our dataset
        data: {
            labels: labeldata,
            datasets: [{
                label: 'My First dataset',
                backgroundColor: ["#F57F17", "#F9A825", "#FBC02D" ,"#FDD835","#FFEB3B","#FFEE58", "#FFF176", "#FFF59D" ,"#FFF9C4","#FFFDE7","#FFE082", "#FFD54F", "#FFCA28" ,"#FFC107","#FFB300"],
                data: numericdata
            }]
        },
        
        // Configuration options go here
        options: {
             
            display:true,
            text:'Time Used In A Day Chart (Shown in %)',
            responsive: true,
            maintainAspectRatio:false,
            showScale: false
        }
    });

Answer 1

如文档中所述，要使您的图表具有响应性，您需要将其放在 div 中，您可以将其设为响应式 (https://www.chartjs.org/docs/latest/general/responsive.html?h=responsive)

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
   <canvas id="chart"></canvas>
</div>

如何使 chartjs 饼图响应

How to make chartjs pie chart responsive

html

charts

chart.js

responsive