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

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

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

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

当前回答

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

2022-02-23 18:20:44

其他回答

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

我在代码中是这样做的:

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

2017-01-31 08:59:27

这个对我很有用:

我从HTML中设置了高度

canvas#scoreLineToAll.ct-chart.tab-pane.active[height="200"]
canvas#scoreLineTo3Months.ct-chart.tab-pane[height="200"]
canvas#scoreLineToYear.ct-chart.tab-pane[height="200"]

然后我禁用了保持纵横比

options: {
  responsive: true,
  maintainAspectRatio: false,

2017-08-03 15:34:07

需要图表100%填充父元素，而不是手动设置高度，问题是强制父div总是填充剩余空间。

在设置响应和比率选项后(查看相关的chartjs文档)，下面的css做到了:

html

<div class="panel">
  <div class="chart-container">
    <canvas id="chart"></canvas>
  </div>
</div>

scss:

.panel {
  display: flex;

  .chart-container {
    position: relative;
    flex-grow: 1;
    min-height: 0;
  }
}

2019-11-20 03:38:05

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

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

并设置

options: {  
    responsive: true,
    maintainAspectRatio: false
}

2018-01-30 14:22:45

您还可以设置画布的尺寸

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

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

options: {
    responsive: false,
}

2019-12-05 04:44:30

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

推荐文章

最新文章

标签