在 Chart.js 中设置图表高度答案

【问题标题】：Set height of chart in Chart.js在 Chart.js 中设置图表高度
【发布时间】：2017-06-16 15:05:14
【问题描述】：

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

【问题讨论】：

您可以使用此解决方案stackoverflow.com/questions/40594025/… 更新图表的高宽比

标签： javascript jquery chart.js

【解决方案1】：

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

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

【讨论】：

是啊！它工作正常。感谢您的提示。最好的问候男人。
为什么这不是公认的答案？完美运行
有趣的是，如果您 destroy() 图表然后第二次在同一个画布上再次创建它，画布的高度可能会在销毁后弄乱，必须在创建前重新应用。不过，如果您不更改选项，则可以避免销毁并改用 update 方法。
如何让它使用可用高度，同时设置最小高度？
解释一下禁用此属性的作用是有意义的（除了已经讨论过的内容）。

【解决方案2】：

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

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

设置

options: {  
    responsive: true,
    maintainAspectRatio: false
}

【讨论】：

谢谢，这里的关键是在图表的选项中将maintainAspectRatio设置为false，否则通过style属性分配的height实际上不会生效.
本的建议是金。
responsive 选项的默认值为true。详情：chartjs.org/docs/latest/general/…
感谢您澄清height 属性必须在父元素上，而不是在画布上

【解决方案3】：

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

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

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

【讨论】：

@MattSaunders 以像素为单位。
请更新以将 ctx 重命名为 elem 或 ctx 以外的其他名称，因为大多数示例使用 var ctx = document.getElementById(canvasId).getContext('2d');，这只是令人困惑...
对于 jQuery：$("#myChart").css("height",500);

【解决方案4】：

您可以将您的画布元素包装在相对定位的父 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>

【讨论】：

根据 Chart.js 网站上的文档，这似乎是正确的方法。

【解决方案5】：

这个对我有用：

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

【讨论】：

【解决方案6】：

您还可以设置画布的尺寸

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

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

options: {
    responsive: false,
}

【讨论】：

【解决方案7】：

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

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

或

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

【讨论】：

美元符号是什么？
$符号是一个选择器，也是jQuery的别名

【解决方案8】：

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

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

【讨论】：

maintainAspectRatio: false 成功了 :)

【解决方案9】：

将图表的 aspectRatio 属性设置为 0 对我有用...

    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
                    }
                }]
            }
        }
    });
myChart.aspectRatio = 0;

【讨论】：

很确定 maintainAspectRatio 应该是 options 的属性

【解决方案10】：

您应该为 canvas 元素使用 html 高度属性：

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

【讨论】：

尽管许多解决方案声明通过画布更新大小，但这对我不起作用。
我发现了问题所在。如果我使用上面的示例并在上面添加您的代码。我的图表不会显示。此行不正确... --> maintainAspectRatio: false, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } }
您需要编辑该行，使其成为 --> 选项：{ maintainAspectRatio: false, responsive: true, scales: { yAxes: [{ ticks: { beginAtZero:true } }] } }
我也有改变宽度的问题？ html代码-->
options: { maintainAspectRatio: false, responsive: true, scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } 只有高度在变化。

【解决方案11】：

只是补充@numediaweb给出的答案

如果你因为按照说明设置maintainAspectRatio=false而头疼不已：我最初是从我在网站上获得的关于使用 Chart.js 和 Angular 2+ 的示例中复制我的代码的：

        <div style="display: block">
          <canvas baseChart
                  [datasets]="chartData"
                  [labels]="chartLabels"
                  [options]="chartOptions"
                  [legend]="chartLegend"
                  [colors]="chartColors"
                  [chartType]="chartType">
          </canvas>
        </div>

要使这项工作正常工作，您必须删除嵌入的（和不必要的）style="display: block"，而是为封闭的 div 定义一个类，并在 CSS 中定义它的高度。

一旦你这样做了，图表应该有响应宽度但固定高度。

【讨论】：

【解决方案12】：

需要图表填充父元素 100%，而不是手动设置高度，问题是强制父 div 始终填充剩余空间。

在设置响应和比率选项后（查看相关的chartjs doc），下面的 css 就可以了：

html

<div class="panel">
  <div class="chart-container">
    <canvas id="chart"></canvas>
  </div>
</div>

scss:

.panel {
  display: flex;

  .chart-container {
    position: relative;
    flex-grow: 1;
    min-height: 0;
  }
}

【讨论】：

【解决方案13】：

设置chartjs图表的大小可以通过设置周围容器的with来简单实现：

   <div style="width:400px;">
     <canvas id="myChart"></canvas>
   </div>

但一个重要的细节是，您可能需要在创建图表后resize：

var ctx = $('#myChart');
var myChart = new Chart(ctx, {
    ......
    data: {
           ........
    },
    options: {
        responsive: false,
        maintainAspectRatio: true
    }
});
// now resize the new chart to fit into the canvas....
myChart.resize();

【讨论】：