在 Chart.js 中设置图表高度
Posted
技术标签:
【中文标题】在 Chart.js 中设置图表高度【英文标题】：Set height of chart in Chart.js 【发布时间】：2017-06-16 15:05:14 【问题描述】：我想用 Chart.js 绘制一个水平条形图，但它一直在缩放图表，而不是使用我从脚本中分配的画布高度。
有没有办法从脚本中设置图形的高度？
见小提琴：Jsfidle
<div class="graph">
<div class="chart-legend">
</div>
<div class="chart">
<canvas id="myChart"></canvas>
</div>
</div>
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
]
);
【问题讨论】：
您可以使用此解决方案***.com/questions/40594025/… 更新图表的高宽比 【参考方案1】：如果您在选项中禁用保持纵横比，则它使用可用高度：
var chart = new Chart('blabla',
type: 'bar',
data:
,
options:
maintainAspectRatio: false,
);
【讨论】：
是啊！它工作正常。感谢您的提示。最好的问候男人。 为什么这不是公认的答案？完美运行 有趣的是，如果您destroy() 图表然后第二次在同一个画布上再次创建它，画布的高度可能会在销毁后弄乱，必须在创建前重新应用。不过，如果您不更改选项，则可以避免销毁并改用 update 方法。
如何让它使用可用高度，同时设置最小高度？
解释一下禁用此属性的作用是有意义的（除了已经讨论过的内容）。【参考方案2】：
最简单的方法是为画布创建一个容器并设置它的高度：
<div style="height: 300px">
<canvas id="chart"></canvas>
</div>
设置
options:
responsive: true,
maintainAspectRatio: false
【讨论】：
谢谢，这里的关键是在图表的选项中将maintainAspectRatio设置为false，否则通过style属性分配的height实际上不会生效.
本的建议是金。
responsive 选项的默认值为true。详情：chartjs.org/docs/latest/general/…
感谢您澄清height 属性必须在父元素上，而不是在画布上【参考方案3】：
似乎var ctx = $('#myChart'); 正在返回一个元素列表。您需要使用ctx[0] 引用第一个。
高度也是一个属性，而不是一个函数。
我在我的代码中是这样做的：
var chartEl = document.getElementById("myChart");
chartEl.height = 500;
【讨论】：
@MattSaunders 以像素为单位。 请更新以将 ctx 重命名为 elem 或 ctx 以外的其他名称，因为大多数示例使用var ctx = document.getElementById(canvasId).getContext('2d');，这只是令人困惑...
对于 jQuery：$("#myChart").css("height",500);【参考方案4】：
您可以将您的画布元素包装在相对定位的父 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>
【讨论】：
根据 Chart.js 网站上的文档，这似乎是正确的方法。【参考方案5】：这个对我有用：
我从 HTML 设置高度
canvas#scoreLineToAll.ct-chart.tab-pane.active[]
canvas#scoreLineTo3Months.ct-chart.tab-pane[]
canvas#scoreLineToYear.ct-chart.tab-pane[]
然后我禁用了保持纵横比
options:
responsive: true,
maintainAspectRatio: false,
【讨论】：
【参考方案6】：您还可以设置画布的尺寸
<canvas id="myChart" ></canvas>
然后将响应选项设置为 false 以始终将图表保持在指定的大小。
options:
responsive: false,
【讨论】：
【参考方案7】：他是对的。如果你想继续使用 jQuery，你可以这样做
var ctx = $('#myChart')[0];
ctx.height = 500;
或
var ctx = $('#myChart');
ctx.attr('height',500);
【讨论】：
美元符号是什么？ $符号是一个选择器，也是jQuery的别名【参考方案8】：我创建了一个容器并将其设置为所需的视口高度（取决于图表数量或图表特定大小）：
.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,
【讨论】：
maintainAspectRatio: false 成功了 :)【参考方案9】：将图表的 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;
【讨论】：
很确定maintainAspectRatio 应该是 options 的属性【参考方案10】：
您应该为 canvas 元素使用 html 高度属性：
<div class="chart">
<canvas id="myChart" ></canvas>
</div>
【讨论】：
尽管许多解决方案声明通过画布更新大小，但这对我不起作用。 我发现了问题所在。如果我使用上面的示例并在上面添加您的代码。我的图表不会显示。此行不正确... --> maintainAspectRatio: false, options: scales: yAxes: [ ticks: beginAtZero:true ] 您需要编辑该行，使其成为 --> 选项： maintainAspectRatio: false, responsive: true, scales: yAxes: [ ticks: beginAtZero:true ] 我也有改变宽度的问题？ html代码--> options: maintainAspectRatio: false, responsive: true, scales: yAxes: [ ticks: beginAtZero:true ] 只有高度在变化。【参考方案11】：只是补充@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 中定义它的高度。
一旦你这样做了，图表应该有响应宽度但固定高度。
【讨论】：
【参考方案12】：需要图表填充父元素 100%，而不是手动设置高度，问题是强制父 div 始终填充剩余空间。
在设置响应和比率选项后（查看相关的chartjs doc），下面的 css 就可以了：
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;
【讨论】：
【参考方案13】：设置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();
【讨论】：
以上是关于在 Chart.js 中设置图表高度的主要内容，如果未能解决你的问题，请参考以下文章