Установите высоту диаграммы в Chart.js

Ответ 1

Кажется, что var ctx = $('#myChart'); возвращает список элементов. Вам нужно будет обратиться к первому, используя ctx[0]. Также height является свойством, а не функцией.

Я сделал это в своем коде:

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

Ответ 2

Если вы отключите поддерживаемый формат изображения в параметрах, то он использует доступную высоту:

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

Ответ 3

Самый простой способ - создать контейнер для холста и установить его высоту:

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

и установить

options: {  
    responsive: true,
    maintainAspectRatio: false
}

Ответ 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,

Ответ 5

Вы можете обернуть свой элемент canvas в родительский div, расположив его относительно, а затем присвоить этому div нужную высоту, установив флажок keepAspectRatio: 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>

Ответ 6

Он прав. Если вы хотите остаться с jQuery, вы можете сделать это

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

или

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

Ответ 7

Установите свойство 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;

Ответ 8

Просто чтобы добавить к ответу @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.

После того, как вы это сделаете, диаграмма должна иметь чувствительную ширину, но фиксированную высоту.