Javascript 在 Chart.js 中设置图表的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41953158/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set height of chart in Chart.js
提问by Vincent T
I want to draw a horizontal bar chart with Chart.js but it keeps scaling the chart instead of using the height I assign the canvas form the script.
我想用 Chart.js 绘制一个水平条形图，但它不断缩放图表，而不是使用我从脚本分配画布的高度。
Is there any way to set the height of the graph from the script?
有没有办法从脚本中设置图形的高度？
See fiddle: Jsfidle
参见小提琴：Jsfiddle
HTML
HTML
<div class="graph">
<div class="chart-legend">
</div>
<div class="chart">
<canvas id="myChart"></canvas>
</div>
</div>
JavaScript
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
}
}]
}
}
});
采纳答案by Riscie
Seems like var ctx = $('#myChart');is returning a list of elements. You would need to reference the first by using ctx[0].
Also height is a property, not a function.
似乎var ctx = $('#myChart');正在返回一个元素列表。您需要使用ctx[0]. 高度也是一个属性，而不是一个函数。
I did it this way in my code:
我在我的代码中是这样做的：
var ctx = document.getElementById("myChart");
ctx.height = 500;
回答by numediaweb
If you disable the maintain aspect ratio in options then it uses the available height:
如果您在选项中禁用保持纵横比，则它使用可用高度：
var chart = new Chart('blabla', {
type: 'bar',
data: {
},
options: {
maintainAspectRatio: false,
}
});
回答by bibamann
The easiest way is to create a container for the canvas and set its height:
最简单的方法是为画布创建一个容器并设置其高度：
<div style="height: 300px">
<canvas id="chart"></canvas>
</div>
and set
并设置
options: {
responsive: true,
maintainAspectRatio: false
}
回答by Geoff Kendall
You can wrap your canvas element in a parent div, relatively positioned, then give that div the height you want, setting maintainAspectRatio: false in your options
您可以将画布元素包装在父 div 中，相对定位，然后为该 div 提供所需的高度，在选项中设置维护 AspectRatio: 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>
回答by illusionist
This one worked for me:
这个对我有用：
I set the height from HTML
我从 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"]
Then I disabled to maintaining aspect ratio
然后我禁用了保持纵横比
options: {
responsive: true,
maintainAspectRatio: false,
回答by relief.melone
He's right. If you want to stay with jQuery you could do this
他是对的。如果你想继续使用 jQuery，你可以这样做
var ctx = $('#myChart')[0];
ctx.height = 500;
or
或者
var ctx = $('#myChart');
ctx.attr('height',500);
回答by Franz Kiermaier
Set the aspectRatio property of the chart to 0 did the trick for me...
将图表的 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;
回答by Hmerman6006
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 optionproperties of your chart:
当然，设置option图表的以下属性非常重要（已多次提及）：
options:{
maintainAspectRatio: false,
responsive: true,
}
回答by velval
You can also set the dimensions to the canvas
您还可以将尺寸设置为画布
<canvas id="myChart" width="400" height="400"></canvas>
And then set the responsive options to falseto always maintain the chart at the size specified.
然后将响应选项设置为false以始终将图表保持在指定的大小。
options: {
responsive: false,
}
回答by Basharat Hussain
You should use html height attribute for the canvas element as:
您应该将画布元素的 html 高度属性用作：
<div class="chart">
<canvas id="myChart" height="100"></canvas>
</div>
