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

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

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

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

当前回答

设置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();

2021-11-19 12:45:30

其他回答

设置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();

2021-11-19 12:45: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

这个对我很有用:

我从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

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

我在代码中是这样做的:

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

2017-01-31 08:59:27

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

推荐文章

最新文章

标签