Chart.js 纵横比/强制高度答案

【问题标题】：Chart.js aspect ratio / forced heightChart.js 纵横比/强制高度
【发布时间】：2017-03-28 09:38:55
【问题描述】：

我正在尝试使用 chart.js 创建缩略图，该缩略图将链接到包含完整图表的页面。

链接页面上的完整图表看起来不错，但对于缩略图，我无法正确调整大小。画布覆盖了正确的区域，但图表没有垂直填充它。

var data = {
    labels: ['','','','','','','','','',''],
    datasets: [{
        data:[22,25,23,24,25,22,25,23,24,25],
            backgroundColor: "rgba(54, 255, 170, 0.4)",
            borderColor: "rgba(54, 255, 170, 1)",
            orderWidth: 1,
    }]
};
var options = {
    tooltips: false,
    legend: {
        display:false
    },
    scales: {
        yAxes: [{
            display:false,
            ticks: {
                beginAtZero:true
            }
        }],
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }]
    }
};
            
new Chart($("#chart-"+this.model.id), {
    type: 'bar',
    data: data,
    options: options        
});

我尝试过调整画布的最小高度之类的方法，但这会导致条形模糊。有什么办法可以调整条的高度以占据整个画布？

【问题讨论】：

标签： javascript canvas chart.js height

【解决方案1】：

尝试设置这些选项：

options: {
  responsive: true,
  maintainAspectRatio: false
}

如果将maintainAspectRatio设置为true，则会自动计算高度。

【讨论】：

【解决方案2】：

实际上，在Chart.js 3.2.1 中，要更新纵横比以向您的方案添加更多高度，您可以使用aspectRatio 选项：

options: {          
   aspectRatio: 1, 
}

根据文档：

画布纵横比（即宽度/高度，值为 1 表示方形画布）。请注意，如果高度明确定义为属性或通过样式，则忽略此选项。

你可以这样设置：

1 方方正正
0.5 是宽度的两倍
2 宽度是高度的两倍

【讨论】：

【解决方案3】：

const config = {
  type: 'bar',
  data,
  options: {
      responsive: true,
      maintainAspectRatio: false
  }
};
var yourChart= new Chart(
    document.getElementById('chartCanvas'),
    config
  );
});
yourChart.canvas.parentNode.style.height = '480px'; 
yourChart.canvas.parentNode.style.width = '280px';

【讨论】：

【解决方案4】：

使用maintainAspectRatio 和responsive

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

let chart = new Chart('myChart', {

type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

【讨论】：