如何在 chart.js 中更改图表高度

Question

我会创建一个水平条形图。

问题是我无法更改图表的高度（不是条形图）

我创建了我的数据和选项配置：

  this.data = {
        labels: ['SAF/TGA'],
        datasets: [

            {
                label: 'SAF/TGA',
                backgroundColor: '#9CBB65',
                borderColor: '#72242',
                data: [28],

            }
        ],
  }
  this.options= {
            responsive: true,
    maintainAspectRatio: false

        scales: {
        yAxes: [{
          barThickness: 5,
          gridLines:{
          display: true,
          offsetGridLines: false
          }
        }],
        xAxes: [{
          gridLines:"rgba(0, 0, 0, 0)"
        }]
      },

    }
}

然后我用高度和宽度选项在 HTML 中调用我的图表：

<p-chart type="horizontalBar" [data]="data" [options]="options" width="10" height="10px">
</p-chart>

当我更改heighthtml 中的值时，高度不会改变

这就是我想要的

随着轴越来越靠近酒吧。

Answer 1

尝试更改选项以禁用纵横比

var chart = new Chart('bar_charty', {
  type: 'bar',
  data: {},
  options: {
    maintainAspectRatio: false,
  }
});

当您使包含元素的高度更大时，这应该缩放您的图表。

您可能还需要像这样为图表创建一个容器，并在父级中设置它的高度。

<div style="height: 300px">
  <canvas id="chart"></canvas>
</div>