在 Chart.js 中设置图表高度

Question

我想用 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

原文由 Vincent T 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好像 var ctx = $('#myChart'); 正在返回一个元素列表。您需要使用 ctx[0] 来引用第一个。

高度也是一个属性，而不是一个函数。

我在我的代码中这样做了：

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

原文由 Riscie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

添加一个相对位置元素，其高度是根据填充计算的（与纵横比相同），但如果您需要该图表不超过某个最大高度，则使用新的强大的 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 ，然后停止缩放。

原文由 Shashank Bhatt 发布，翻译遵循 CC BY-SA 4.0 许可协议