Question

我使用Chart Js创建了一个图表。但是，如下所示，图表不适合宽度。 canvas的属性也不起作用。似乎height有效，但我无法修改width（即使我更改了值，它也没有那个值）。我将maintainAspectRatio设为false，reponsive为true，但无效。

如何使图表适合设定的宽度和高度？

任何建议或意见都将不胜感激。

<canvas id="monthly-sales" width="300" height="200"></canvas>

JS

var monthlySales = document.getElementById("monthly-sales").getContext('2d');
        var monthlySalesChart = new Chart(monthlySales, {
            type: 'bar',
            data: {
                labels: listOfMonths.slice(10,2),
                datasets: [{
                    label: 'Sales',
                    data: [
                        monthlyFees['sales'][10],
                        monthlyFees['sales'][11]
                    ],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                    ],
                    borderWidth: 1,
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Sales'
                },
                legend: {
                    display: false,
                },
                maintainAspectRatio: false,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true,
                            userCallback: function userCallback(tick) {
                                return (tick / 100000000);
                            }
                        }
                    }]
                },
                tooltips: {
                    callbacks: {
                        label: function label(tooltipItem, data) {
                            return numeral(tooltipItem.yLabel).format('0,0');
                        }
                    }
                }
            }
        });

HTML

<div class="col-sm-12">
    <div class="col-sm-4">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">This month</h4>
            </div>
            <div class="card-body">
                <div class="col-sm-4">
                    <div class="card-chart">
                        <canvas id="monthly-sales" width="200" height="200"></canvas>
                    </div>
                    <div>
                        Sales Changed: <span id="monthly-sales-changes"></span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="card-chart">
                        <canvas id="monthly-profits" width="200" height="150"></canvas>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="card-chart">
                        <canvas id="monthly-orders" width="200" height="150"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我发现了这个问题。由于未正确定义labels，因此未正确绘制图表。

如何使用Chart.js更改图表的宽度

1 个答案: