Ustaw wysokość wykresu w Chart.js

Chcę narysować poziomy wykres słupkowy za pomocą Chart.js, ale skaluje on wykres zamiast używać wysokości, którą przypisuję kanwie ze skryptu.

Czy istnieje sposób, aby ustawić wysokość wykresu ze skryptu?

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

Wygląda na var ctx = $('#myChart');to, że zwraca listę elementów. Będziesz musiał odwołać się do pierwszego za pomocą ctx[0]. Również wysokość jest właściwością, a nie funkcją.

Zrobiłem to w moim kodzie:

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

Jeśli wyłączysz utrzymywanie współczynnika kształtu w opcjach, to używa dostępnej wysokości:

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

Najłatwiej jest stworzyć pojemnik na płótno i ustawić jego wysokość:

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

i nastaw

options: {  
    responsive: true,
    maintainAspectRatio: false
}

Możesz zawinąć element canvas w nadrzędny element div, umieszczony względnie, a następnie nadać temu elementowi odpowiednią wysokość, ustawiając w opcjach 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>

Ten pracował dla mnie:

Wysokość ustawiam z 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"]

Następnie wyłączyłem utrzymywanie proporcji

options: {
  responsive: true,
  maintainAspectRatio: false,

On ma rację. Jeśli chcesz pozostać przy jQuery, możesz to zrobić

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

lub

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

Możesz również ustawić wymiary na płótnie

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

Następnie ustaw responsywne opcje na false, aby zawsze utrzymywać wykres w określonym rozmiarze.

options: {
    responsive: false,
}

Należy użyć atrybutu wysokości html dla elementu canvas jako:

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

Ustawienie właściwości AspectRatio wykresu na 0 załatwiło sprawę ...

    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;

Utworzyłem kontener i ustawiłem dla niego żądaną wysokość portu widoku (w zależności od liczby wykresów lub rozmiarów wykresów):

.graph-container {
width: 100%;
height: 30vh;
}

Aby być dynamicznym dla rozmiarów ekranu, ustawiłem kontener w następujący sposób:

*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;
    }
}

Oczywiście bardzo ważne (o czym wielokrotnie wspominano) ustawienie następujących optionwłaściwości wykresu:

options:{
    maintainAspectRatio: false,
    responsive: true,
}

Wystarczy dodać do odpowiedzi udzielonej przez @numediaweb

Na wypadek, gdybyś walił głową w ścianę, ponieważ po wykonaniu instrukcji ustawienia maintainAspectRatio=false: Pierwotnie skopiowałem mój kod z przykładu, który dostałem na stronie internetowej na temat korzystania z Chart.js z Angular 2+:

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

Aby to działało poprawnie, musisz usunąć osadzone (i niepotrzebne). style="display: block" Zamiast tego zdefiniuj klasę otaczającego elementu div i zdefiniuj jego wysokość w CSS.

Gdy to zrobisz, wykres powinien mieć responsywną szerokość, ale stałą wysokość.

Potrzebowałem wykresu do wypełnienia elementu nadrzędnego w 100%, zamiast ręcznego ustawiania wysokości, a problemem było zmuszenie nadrzędnego elementu DIV do wypełnienia pozostałej przestrzeni.

Po ustawieniu opcji responsywności i współczynnika (sprawdź powiązany dokument chartjs ), następujący css załatwił sprawę :

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