Setel ketinggian grafik di Chart.js

Saya ingin menggambar bagan batang horizontal dengan Chart.js tetapi ia terus menskalakan bagan daripada menggunakan ketinggian yang saya tetapkan kanvas dari naskah.

Apakah ada cara untuk mengatur ketinggian grafik dari skrip?

Lihat biola: 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
                }
            }]
        }
    }
});

Sepertinya var ctx = $('#myChart');mengembalikan daftar elemen. Anda perlu merujuk yang pertama dengan menggunakan ctx[0]. Juga ketinggian adalah properti, bukan fungsi.

Saya melakukannya dengan cara ini dalam kode saya:

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

Jika Anda menonaktifkan rasio aspek pemeliharaan dalam opsi maka menggunakan tinggi yang tersedia:

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

Cara termudah adalah membuat wadah untuk kanvas dan mengatur ketinggiannya:

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

dan mengatur

options: {  
    responsive: true,
    maintainAspectRatio: false
}

Anda dapat membungkus elemen kanvas Anda dalam div induk, relatif diposisikan, lalu memberikan div itu ketinggian yang Anda inginkan, mengatur maintainAspectRatio: false di opsi Anda

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

Yang ini bekerja untuk saya:

Saya mengatur ketinggian dari 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"]

Lalu saya dinonaktifkan untuk mempertahankan aspek rasio

options: {
  responsive: true,
  maintainAspectRatio: false,

Dia benar. Jika Anda ingin tetap dengan jQuery Anda bisa melakukan ini

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

atau

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

Setel properti aspectRatio bagan ke 0 lakukan trik untuk saya ...

    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;

Anda harus menggunakan atribut tinggi html untuk elemen kanvas sebagai:

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

Saya membuat wadah dan mengatur ketinggian port tampilan yang diinginkan (tergantung pada jumlah bagan atau ukuran bagan tertentu):

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

Agar dinamis dengan ukuran layar saya mengatur wadah sebagai berikut:

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

Tentu saja sangat penting (seperti yang telah dirujuk berkali-kali) atur optionproperti berikut dari bagan Anda:

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

Anda juga dapat mengatur dimensi ke kanvas

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

Dan kemudian mengatur opsi responsif ke false untuk selalu mempertahankan grafik pada ukuran yang ditentukan.

options: {
    responsive: false,
}

Diperlukan bagan untuk mengisi elemen induk 100%, daripada mengatur ketinggian secara manual, dan masalahnya adalah memaksa div induk untuk selalu mengisi ruang yang tersisa.

Setelah menetapkan opsi responsif dan rasio (periksa chartjs doc terkait ), css berikut melakukan trik:

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

Hanya dengan menambahkan jawaban yang diberikan oleh @numediaweb

Jika Anda membenturkan kepala Anda ke dinding karena setelah mengikuti instruksi untuk mengatur maintainAspectRatio=false: Saya awalnya menyalin kode saya dari contoh yang saya dapatkan di situs web tentang menggunakan Chart.js dengan Angular 2+:

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

Untuk membuat ini bekerja dengan benar, Anda harus menghapus embedded (dan tidak perlu) style="display: block" Alih-alih menentukan kelas untuk div yang melampirkan, dan menentukan tingginya dalam CSS.

Setelah Anda melakukannya, bagan harus memiliki lebar responsif tetapi ketinggian tetap.