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


当前回答

您还可以设置画布的尺寸

<canvas id="myChart" width="400" height="400"></canvas>

然后将响应选项设置为false,以始终保持图表在指定的大小。

options: {
    responsive: false,
}

其他回答

这个对我很有用:

我从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,

你可以把你的canvas元素包装在一个父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>

对于react,这样做是有效的:

<Doughnut
  data={data}
  height="200px"
  width="200px"
  options={{ maintainAspectRatio: false }}
/>

这里的问题是maintainAspectRatio需要在options节点内,而不是在示例中的同一级别。

你应该为canvas元素使用html height属性:

<div class="chart">
    <canvas id="myChart" height="100"></canvas>
</div>