如何设置charts.js的自动宽度

bttbmeg0  于 2023-01-13  发布在  Chart.js
关注(0)|答案(1)|浏览(233)

img of charts
我有一些图表在我的模板,当大小改变图表有旧的宽度和高度,有宽度和高度不改变
有谁能帮我解决这个问题吗?

<div class="col-lg-4 col-md-6 col-12">
    <div class="card text-white shadow">
        <div class="card-header border-0 bg-success">
            <p class="h4 text-center p-2 pt-3">پروژه های در صف انجام</p>
            <p class="text-center m-0">تعداد کل: 50 پروژه</p>
        </div>
        <div class="card-body bg-success charts-sizes " >
            <canvas class="bg-white rounded-3 p-1" id="wait-projects-container"></canvas>
        </div>
        <div class="card-footer border-0 bg-success">
            <button class="btn btn-warning shadow w-100">مشاهده پروژه های در صف انجام</button>
        </div>
    </div>
</div>

我的chart js代码是

let chart_wait = new Chart(wait_projects, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [65, 31, 85, 34, 15, 4],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
t1rydlwq

t1rydlwq1#

你可以在你的js代码中为响应图表设置选项

options: {
      responsive: true,
      maintainAspectRatio: false,
}

在这种情况下,这应该会对您有所帮助

相关问题