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