你应该为canvas元素使用html height属性:

<div class="chart">
    <canvas id="myChart" height="100"></canvas>
</div>

似乎var ctx = $('#myChart');返回元素列表。您需要使用ctx[0]引用第一个。 高度也是一个属性，而不是函数。

我在代码中是这样做的:

var chartEl = document.getElementById("myChart");
chartEl.height = 500;

他是对的。如果你想继续使用jQuery，你可以这样做

var ctx = $('#myChart')[0];
ctx.height = 500;

or

var ctx = $('#myChart');
ctx.attr('height',500);

设置chartjs图表的大小可以简单地通过设置周围容器的with来实现:

   <div style="width:400px;">
     <canvas id="myChart"></canvas>
   </div>

但是一个重要的细节是，你可能需要在创建之后调整图表的大小:

var ctx = $('#myChart');
var myChart = new Chart(ctx, {
    ......
    data: {
           ........
    },
    options: {
        responsive: false,
        maintainAspectRatio: true
    }
});
// now resize the new chart to fit into the canvas....
myChart.resize();

我创建了一个容器，并将其设置为视图端口的期望高度(取决于图表的数量或图表的特定大小):

.graph-container {
width: 100%;
height: 30vh;
}

为了对屏幕大小进行动态调整，我将容器设置如下:

*Small media devices specific styles*/
@media screen and (max-width: 800px) {
.graph-container {
        display: block;
        float: none;
        width: 100%;
        margin-top: 0px;
        margin-right:0px;
        margin-left:0px;
        height: auto;
    }
}

当然，非常重要的是(已经提到过很多次了)在图表中设置以下选项属性:

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

您还可以设置画布的尺寸

<canvas id="myChart" width="400" height="400"></canvas>

然后将响应选项设置为false，以始终保持图表在指定的大小。

options: {
    responsive: false,
}