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

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

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

var ctx = $('#myChart');


ctx.height(500);


var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
maintainAspectRatio: false,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<div class="graph">
<div class="chart-legend">


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

参见提琴:Jsfiddle上的代码

347942 次浏览
小开
最佳答案
var ctx = $('#myChart');似乎返回了一个元素列表。你需要使用ctx[0]来引用第一个。 此外，高度是一个属性，而不是函数

我在代码中是这样做的:

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

他是对的。如果你想继续使用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,
}
});
小开

这个对我很有用:

我从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,
小开

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

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

并设置

options: {
responsive: true,
maintainAspectRatio: false
}
小开

将图表的aspectRatio属性设置为0对我来说是有用的…

    var ctx = $('#myChart');


ctx.height(500);


var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
maintainAspectRatio: false,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
myChart.aspectRatio = 0;
小开

只是添加到@numediaweb给出的答案

如果你在遵循设置maintainAspectRatio=false的说明后把头撞到墙上:我最初从一个网站上获得的使用图表.js和Angular 2+的示例中复制了我的代码:

        <div style="display: block">
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[colors]="chartColors"
[chartType]="chartType">
</canvas>
</div>

为了使它正确工作，你必须删除嵌入的(不必要的)style="display: block"，而是为包围div定义一个类，并在CSS中定义它的高度。

一旦你这样做了，图表应该有响应的宽度和固定的高度。

小开

你可以把你的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>
小开

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

在设置响应和比率选项之后(查看相关的chartjs医生)，下面的css完成了任务:

超文本标记语言

<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;
}
}
小开

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

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

当然非常重要(已经提到过很多次了)，为你的图表设置以下option属性:

options:{
maintainAspectRatio: false,
responsive: true,
}
小开

您还可以设置画布的尺寸

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

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

options: {
responsive: false,
}
小开

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

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

设置chartjs图表的大小可以简单地通过设置周围容器的with来实现:

   <div style="width:400px;">
<canvas id="myChart"></canvas>
</div>

但是一个重要的细节是，你可能需要在创建之后resize你的图表:

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();
小开

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

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

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

小开

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

...


options = {
maintainAspectRatio: false,


...
}


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

考虑下面的代码。

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

根据自己的改变高度，对我来说500 px只是工作得很好;)

小开

添加一个相对位置元素，其高度由填充计算(工作原理与纵横比相同)，但如果你需要图表不超过某个最大高度，则使用css的新强大的最小值单元。还可以在不支持的地方添加固定的回退填充。

<div class="dashboard-charts" style="position: relative; padding-top:40%; padding-top:min(40%,530px)">
<div style="position:absolute;width: 100%;height:100%;left: 0;top: 0">
<canvas id="sales-dashboard-bar"></canvas>
</div>
</div>

然后在javascript的options对象中设置maintainAspectRatio为false来考虑和使用父元素的高度，在这种情况下，父元素的高度是相对于祖父元素的大小的绝对定位和大小。

var mychart = new Chart(document.getElementById("sales-dashboard-bar"),{
options: {
maintainAspectRatio: false,
}
})

因此，图表将很好地缩放宽高比为2.5，直到它达到最大高度530px，然后停止缩放。


提交答案