在 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

如果您在选项中禁用保持纵横比，那么它会使用可用的高度：

 var chart = new Chart('blabla', {
    type: 'bar',
    data: {
    },
    options: {
        maintainAspectRatio: false,
    }
});

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