如何在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>

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

这就是我会

靠近轴的轴。

Answer 1

尝试更改选项以禁用宽高比

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

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

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

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