Question

我在 Chart.js 中创建了一个圆环图 (Bootstrap Panel)。出于某种原因，图表仅占该面板宽度的 50% 左右。

我找到了这个主题：Chart.js canvas resize 并将 maintainAspectRatio: true 更改为 maintainAspectRatio: false，但随后图表未创建/可见。

有什么建议吗？

<div class="panel panel-default">
    <div class="panel-heading">Aandachtspunten</div>
    <div class="panel-body">

       <div class="container" style="position: relative; width:100%">
          <canvas id="myChart"></canvas>
        </div>

    </div>
</div>

<script>
    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Red', 'Blue', 'Yellow'],
            datasets: [{
                data: [10, 20, 30],
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 206, 86)'
                ],
                borderWidth: 1
            }],
            labels: [
                'Red',
                'Yellow',
                'Blue'
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            legend: false,
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    });
</script>

当我将图像保存到我的计算机时，它的尺寸为 284x142。因为图像及其背景不是方形的，所以我想我遇到了这个问题。

Answer 1

这是因为它受到高度的限制，因为它已经达到了最大高度。您可以尝试手动设置宽度，但如果它总是试图制作一个完美的圆圈，则它可能不起作用。 https://www.chartjs.org/docs/latest/general/responsive.html#important-note

Chart.js 画布调整饼图/甜甜圈图的大小

1 个答案: