web-dev-qa-db-fra.com

Définir la hauteur du graphique dans Chart.js

Je souhaite dessiner un graphique à barres horizontales avec Chart.js, mais il continue de mettre à l'échelle le graphique au lieu d'utiliser la hauteur que j'attribue à la forme de dessin le script.

Est-il possible de définir la hauteur du graphique à partir du script?

Voir le violon: 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
                }
            }]
        }
    }
});
javascriptjquerychart.js
95
Vincent T

On dirait que var ctx = $('#myChart'); renvoie une liste d'éléments. Vous devez référencer le premier en utilisant ctx[0]. Aussi la hauteur est une propriété, pas une fonction.

Je l'ai fait de cette façon dans mon code:

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

Si vous désactivez le rapport hauteur/largeur dans les options, il utilise la hauteur disponible:

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

Le moyen le plus simple consiste à créer un conteneur pour le canevas et à définir sa hauteur:

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

et mettre

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

Celui-ci a fonctionné pour moi:

je règle la hauteur depuis 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"]

Puis j'ai désactivé pour conserver les proportions

options: {
  responsive: true,
  maintainAspectRatio: false,
14
illusionist

Vous pouvez envelopper votre élément de zone de dessin dans un div parent relativement positionné, puis lui donner la hauteur souhaitée en définissant keepAspectRatio: false dans vos options.

//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>
11
Geoff Kendall

Il a raison. Si vous voulez rester avec jQuery, vous pouvez le faire

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

ou

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

Définissez la propriété aspectRatio du graphique sur 0 a joué le rôle pour moi ...

    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;
4
Franz Kiermaier

Juste pour ajouter à la réponse donnée par @ numediaweb

Si vous vous cognez la tête contre le mur, car après avoir suivi les instructions pour configurer maintainAspectRatio=false: j'ai initialement copié mon code à partir d'un exemple obtenu sur un site Web sur l'utilisation de Chart.js avec Angular. 2+:

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

Pour que cela fonctionne correctement, vous devez supprimer le style="display: block" incorporé (et inutile). Définissez plutôt une classe pour le div englobant et définissez sa hauteur en CSS.

Une fois que vous faites cela, le graphique doit avoir une largeur sensible mais une hauteur fixe.

0
Andrew