Charts.js图表​​大小与容器设置的大小不同

Question

我正在使用250x250的canvas元素来显示一个由Charts.js生成的字符，但是它比我设置的要大，我是否错过了一些配置？此代码主要是官方文档的示例，但我可以t设置大小。

list1 = ["apple","bat"]
list2 = ["cat", "mat"]

tester = ["www.cat.com","www.website.com","www.apple.com"]
for a in tester:
    print(a)
    if (item1 in a for item1 in list1):
        print("apple is present")
    elif ("john" in a):
        print("failed")
    elif (item2 in a for item2 in list2):
        print("cat is present")

Answer 1

尝试向选项对象添加2个属性：

responsive: true,
maintainAspectRatio: false

Answer 2

options: {
    maintainAspectRatio: false,
    responsive: true,
    scales: {
        yAxes: [{
           ticks: {
             beginAtZero: true
            }
        }]
   }
}

这将解决您的问题。但是它将固定高度。对于宽度，我认为您必须像这样定义canvas元素父级的宽度。

<div class="chart">
  <canvas id="myChart" height="250px"></canvas>
</div>

.chart {
  width: 250px;
}

有关文档，请参见此处。 https://www.chartjs.org/docs/latest/general/responsive.html