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

我会创建一个水平条形图

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

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

  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

时，高度不会更改

这就是我想要的

---

使用更靠近条的轴。

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

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

当您使包含元素的高度变大时，这将缩放图表

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

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

---

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

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

当您使包含元素的高度变大时，这将缩放图表

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

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

这修复了IE11中的问题这修复了IE11中的问题