Ustaw wysokość wykresu w Chart.js

149

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
                }
            }]
        }
    }
});
Vincent T.
źródło

Odpowiedzi:

75

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;
Riscie
źródło
5
@MattSaunders Jest w pikselach.
Jonathan Lam,
zaktualizuj, aby zmienić nazwę ctx na coś takiego jak elem lub to samo inne niż ctx, jak używa większość przykładów, var ctx = document.getElementById(canvasId).getContext('2d');co jest po prostu mylące ...
Seabizkit
366

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,
                }
            });
numediaweb
źródło
Tak! Działa dobrze. Dzięki za tę wskazówkę. Z poważaniem stary.
Sedat Kumcu
16
Dlaczego nie jest to akceptowana odpowiedź? Działa idealnie
Tom Doodler
3
Co ciekawe, jeśli destroy()wykres zostanie utworzony ponownie na tym samym płótnie po raz drugi, wysokość płótna może zostać pomieszana po zniszczeniu i musi zostać ponownie zastosowana przed utworzeniem. Możesz jednak uniknąć niszczenia i updatezamiast tego użyć metody, jeśli nie zmienisz opcji.
Gherman
5
Jak wykorzystać dostępną wysokość, ale także ustawić minimalną wysokość?
Zapnologica,
1
Miałoby sens trochę wyjaśnić, co robi wyłączenie tej właściwości (z wyjątkiem tego, co zostało już omówione).
fgblomqvist
127

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
}
bibamann
źródło
21
Dzięki za to, kluczem tutaj jest ustawiony maintainAspectRationa falsew opcjach na wykresie, w przeciwnym razie heightprzypisane przez styleatrybut nie będzie faktycznie zastosowane.
Ben
2
Sugestia Bena jest złota.
rubeonline
Domyślna wartość tej responsiveopcji to true. Szczegóły: chartjs.org/docs/latest/general/…
Dem Pilafian
Dziękuję za wyjaśnienie, że heightwłaściwość musi znajdować się w elemencie nadrzędnym, a nie na płótnie
Savage.
17

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>
Geoff Kendall
źródło
Na podstawie dokumentacji w witrynie Chart.js wydaje się, że jest to właściwe podejście.
Ryan D
14

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,
iluzjonista
źródło
6

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);
relief.melone
źródło
Co to za znak dolara?
Tiberiu-Ionuț Stan
1
$ Znak jest selektor i aliasem jQuery
Andrei Erdoss
4

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,
}
velval
źródło
4

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

<div class="chart">
    <canvas id="myChart" height="100"></canvas>
</div>
Basharat Hussain
źródło
3

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;
Franz Kiermaier
źródło
Całkiem na pewno maintainAspectRatiopowinna być własnościąoptions
camslice
2

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,
}
Hmerman6006
źródło
1

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ść.

Andrzej
źródło
1

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;
  }
}
ego
źródło