在Chart.js中设置图表的高度

Question

我想绘制一个带有Chart.js的水平条形图,但它不断缩放图表而不是使用高度我将脚本分配给画布.

有没有办法从脚本中设置图形的高度？

见小提琴:Jsfidle

HTML

<div class="graph">
  <div class="chart-legend">

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

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
                }
            }]
        }
    }
});

Answer 1

如果在选项中禁用维护纵横比,则它使用可用高度:

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

Answer 2

最简单的方法是为画布创建一个容器并设置其高度:

<div style="height: 300px">
  <canvas id="chart"></canvas>
</div>

并在选项中设置:
responsive:true,maintainAspectRatio:false

Answer 3

似乎var ctx = $('#myChart');正在返回一个元素列表.您需要使用引用第一个ctx[0].高度也是属性,而不是函数.

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

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

Answer 4

这个对我有用:

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

Answer 5

你可以将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>

Answer 6

您还可以将尺寸设置为画布

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

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

options: {
    responsive: false,
}

Answer 7

你看，初始化语句有一个错误。keepAspectRatio应位于选项对象内部，如下所示

...

options = {
   maintainAspectRatio: false,

 ...
}

...

现在，您可以做的是设置图表父元素的高度，因此这里div .chart是div #myChart的父元素。因此，指定div .chart的高度应该可以正常工作。

考虑以下代码。

<div class="chart" style="height: 500px;">
   <canvas id="myChart"></canvas>
</div>

根据自己的情况改变高度，对我来说500px就可以了;)

Answer 8

他是对的。如果您想使用jQuery，可以这样做

var ctx = $('#myChart')[0];
ctx.height = 500;

要么

var ctx = $('#myChart');
ctx.attr('height',500);

Answer 9

我创建了一个容器并将其设置为所需的视口高度（取决于图表数量或图表特定尺寸）：

.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,
}

Answer 10

您应该使用 canvas 元素的 html height 属性，如下所示：

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