我想使用Chart.js绘制水平条形图，但它会不断缩放图表，而不是使用我从脚本中分配画布的高度。
有什么办法可以从脚本中设置图形的高度？
参见小提琴：Jsfidle
的HTML
<div class="graph">
<div class="chart-legend">
</div>
<div class="chart">
<canvas id="myChart"></canvas>
</div>
</div>
的JavaScript
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
}
}]
}
}
});
似乎var ctx = $('#myChart');正在返回元素列表。您需要使用来引用第一个ctx[0]。高度也是属性，而不是功能。
我在我的代码中这样做：
var ctx = document.getElementById("myChart");
ctx.height = 500;
如果在选项中禁用了维持纵横比，则它将使用可用的高度：
var chart = new Chart('blabla', {
type: 'bar',
data: {
},
options: {
maintainAspectRatio: false,
}
});
最简单的方法是为画布创建一个容器并设置其高度：
<div style="height: 300px">
<canvas id="chart"></canvas>
</div>
并设置
options: {
responsive: true,
maintainAspectRatio: false
}
您可以将画布元素包装在相对位置的父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>
这个为我工作：
我从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,
他是对的。如果您想使用jQuery，可以这样做
var ctx = $('#myChart')[0];
ctx.height = 500;
要么
var ctx = $('#myChart');
ctx.attr('height',500);
您还可以将尺寸设置为画布
<canvas id="myChart" width="400" height="400"></canvas>
然后将响应选项设置为false，以始终将图表保持在指定的大小。
options: {
responsive: false,
}
您应该将canvas元素的html height属性使用为：
<div class="chart">
<canvas id="myChart" height="100"></canvas>
</div>
将图表的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;
I created a container and set it the desired height of the view port (depending on the number of charts or chart specific sizes):
.graph-container {
width: 100%;
height: 30vh;
}
To be dynamic to screen sizes I set the container as follows:
*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;
}
}
Of course very important (as have been referred to numerous times) set the following option properties of your chart:
options:{
maintainAspectRatio: false,
responsive: true,
}
Just to add on to the answer given by @numediaweb
万一您将头撞在墙上是因为按照说明进行设置maintainAspectRatio=false：我最初是从一个示例中复制了代码，该示例是我在一个网站上将Chart.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中定义其高度。
完成后，图表应具有响应宽度，但高度应固定。
需要图表填充父元素100％，而不是手动设置高度，问题是迫使父div始终填充剩余空间。
After setting responsive and ratio options (check out related chartjs doc), the following css did the trick:
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;
}
}
文章标签：chart.js , javascript , jquery
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！
文件下载
评论已关闭！