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

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

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

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

当前回答

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

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

2022-01-08 14:23:07

其他回答

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

我在代码中是这样做的:

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

2017-01-31 08:59:27

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

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

2022-01-08 14:23:07

您还可以设置画布的尺寸

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

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

options: {
    responsive: false,
}

2019-12-05 04:44:30

你可以把你的canvas元素包装在一个父div中，相对的位置，然后给这个div你想要的高度，在你的选项中设置maintainAspectRatio: false

//HTML
<div id="canvasWrapper" style="position: relative; height: 80vh/500px/whatever">
<canvas id="chart"></canvas>
</div>

<script>
new Chart(somechart, {
options: {
    responsive: true,
    maintainAspectRatio: false

/*, your other options*/

}
});
</script>

2018-10-19 18:36:50

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

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

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

2017-01-31 09:18:20

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

推荐文章

最新文章

标签