在chart .js中设置图表的高度

我想用chart .js绘制一个水平条形图，但它一直在缩放图表，而不是使用我从脚本中分配的画布的高度。

有没有办法从脚本中设置图形的高度?

参见关于小提琴的代码:Jsfiddle

当前回答

如果你在选项中禁用了保持纵横比，那么它将使用可用的高度:

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

其他回答

对于react，这样做是有效的:

<Doughnut
  data={data}
  height="200px"
  width="200px"
  options={{ maintainAspectRatio: false }}
/>

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

我在代码中是这样做的:

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

看，在初始化语句中有一个错误。maintainAspectRatio应该放在选项对象中，如下所示

...

options = {
   maintainAspectRatio: false,

 ...
}

...

现在，你可以做的是设置图表父元素的高度，这里div .chart是div #myChart的父元素。因此，指定div .chart的高度就可以了。

考虑下面的代码。

<div class="chart" style="height: 500px;">
   <canvas id="myChart"></canvas>
</div>

根据你自己改变高度，对我来说，500px就可以了;)

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

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

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

如果你在选项中禁用了保持纵横比，那么它将使用可用的高度:

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

推荐文章