Stellen Sie die Höhe des Diagramms in Chart.js ein

Ich möchte mit Chart.js ein horizontales Balkendiagramm zeichnen, aber es skaliert das Diagramm weiter, anstatt die Höhe zu verwenden, die ich der Leinwand aus dem Skript zuweise.

Gibt es eine Möglichkeit, die Höhe des Diagramms im Skript festzulegen?

Siehe Geige: 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
                }
            }]
        }
    }
});

Scheint, var ctx = $('#myChart');als würde eine Liste von Elementen zurückgegeben. Sie müssten den ersten mit verwenden ctx[0]. Auch die Höhe ist eine Eigenschaft, keine Funktion.

Ich habe es in meinem Code so gemacht:

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

Wenn Sie das Seitenverhältnis beibehalten in Optionen deaktivieren, wird die verfügbare Höhe verwendet:

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

Am einfachsten ist es, einen Container für die Leinwand zu erstellen und deren Höhe festzulegen:

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

und setzen

options: {  
    responsive: true,
    maintainAspectRatio: false
}

Sie können Ihr Canvas-Element in ein übergeordnetes Div einbinden, das relativ positioniert ist, und diesem Div dann die gewünschte Höhe geben, indem Sie in Ihren Optionen die Option prepareAspectRatio: false festlegen

//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>

Dieser hat für mich gearbeitet:

Ich habe die Höhe von HTML eingestellt

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"]

Dann habe ich deaktiviert, um das Seitenverhältnis beizubehalten

options: {
  responsive: true,
  maintainAspectRatio: false,

Er hat recht. Wenn Sie bei jQuery bleiben möchten, können Sie dies tun

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

oder

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

Setzen Sie die AspectRatio-Eigenschaft des Diagramms auf 0, was den Trick für mich getan hat ...

    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;

Sie sollten das HTML-Höhenattribut für das Canvas-Element wie folgt verwenden:

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

Ich habe einen Container erstellt und die gewünschte Höhe des Ansichtsfensters festgelegt (abhängig von der Anzahl der Diagramme oder den diagrammspezifischen Größen):

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

Um die Bildschirmgröße dynamisch zu gestalten, stelle ich den Container wie folgt ein:

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

Natürlich ist es sehr wichtig (wie bereits mehrfach erwähnt), die folgenden optionEigenschaften Ihres Diagramms festzulegen:

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

Sie können die Abmessungen auch auf die Leinwand einstellen

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

Setzen Sie dann die Antwortoptionen auf false , um das Diagramm immer in der angegebenen Größe zu halten.

options: {
    responsive: false,
}

Das Diagramm musste das übergeordnete Element zu 100% füllen, anstatt die Höhe manuell einzustellen, und das Problem bestand darin, das übergeordnete div zu zwingen, immer den verbleibenden Platz zu füllen.

Nach dem Festlegen der Reaktions- und Verhältnisoptionen ( siehe zugehöriges Diagrammdokument ) hat das folgende CSS den Trick ausgeführt:

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

Nur um die Antwort von @numediaweb zu ergänzen

Für den Fall, dass Sie Ihren Kopf gegen die Wand schlagen, weil Sie die folgenden Anweisungen maintainAspectRatio=falsebefolgt haben: Ich habe meinen Code ursprünglich aus einem Beispiel kopiert, das ich auf einer Website zur Verwendung von Chart.js mit Angular 2+ erhalten habe:

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

Damit dies korrekt funktioniert, müssen Sie das eingebettete (und nicht benötigte) entfernen. style="display: block" Element Definieren Sie stattdessen eine Klasse für das einschließende div und definieren Sie deren Höhe in CSS.

Sobald Sie dies getan haben, sollte das Diagramm eine ansprechende Breite, aber eine feste Höhe haben.