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

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

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

见小提琴:Jsfidle

HTML

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

numediaweb.. 284

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

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

这不是接受的答案吗？完美的工作 (8认同)

这应该是接受的答案,加上一个! (7认同)

如何使用可用高度但也设置最小高度？ (5认同)

是!!+1谢谢. (4认同)

有趣的是,如果你"破坏()"图表,然后在同一个画布上再次创建它,第二次画布的高度可能会在破坏后搞砸,并且必须在创建之前重新应用.但是,如果不更改选项,可以避免破坏并使用`update`方法. (3认同)

---

小智.. 78

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

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

1> numediaweb..：

---

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

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

---

这不是接受的答案吗？完美的工作

---

这应该是接受的答案,加上一个!

---

如何使用可用高度但也设置最小高度？

---

是!!+1谢谢.

---

有趣的是,如果你"破坏()"图表,然后在同一个画布上再次创建它,第二次画布的高度可能会在破坏后搞砸,并且必须在创建之前重新应用.但是,如果不更改选项,可以避免破坏并使用`update`方法.

2> 小智..：

---

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

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

---

多亏了这个,这里的关键是在图形的选项中将`maintainAspectRatio`设置为`false`,否则通过`style`属性赋值的`height`实际上不会生效.

---

本的建议是金子。

3> Riscie..：

---

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

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

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

---

@MattSaunders它以像素为单位.

4> illusionist..：

---

这个对我有用:

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

5> Geoff Kendal..：

---

你可以将canvas元素包装在相对定位的父div中,然后将div设置为你想要的高度,在你的选项中设置maintainAspectRatio:false

//HTML

6> relief.melon..：

---

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

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

要么

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