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

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

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

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

当前回答

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

.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,
}

2019-11-24 14:45:00

其他回答

这里的问题是maintainAspectRatio需要在options节点内，而不是在示例中的同一级别。

2022-02-23 18:20:44

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

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

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

2017-01-31 09:18:20

最简单的方法是为画布创建一个容器，并设置它的高度:

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

并设置

options: {  
    responsive: true,
    maintainAspectRatio: false
}

2018-01-30 14:22:45

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

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

2020-04-19 11:23:43

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

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

2022-01-08 14:23:07

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

推荐文章

最新文章

标签