Chart.js'de grafik yüksekliğini ayarlayın

Chart.js ile yatay bir çubuk grafik çizmek istiyorum ancak tuvali betiğe atadığım yüksekliği kullanmak yerine grafiği ölçeklendirmeye devam ediyor.

Komut dosyasından grafiğin yüksekliğini ayarlamanın herhangi bir yolu var mı?

Keman bakın: 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
                }
            }]
        }
    }
});

Görünüşe var ctx = $('#myChart');göre bir öğe listesi döndürüyor. Kullanarak birincisine başvurmanız gerekir ctx[0]. Ayrıca yükseklik bir özelliktir, işlev değil.

Bunu kodumda şu şekilde yaptım:

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

Seçeneklerde en boy oranını koru özelliğini devre dışı bırakırsanız, mevcut yüksekliği kullanır:

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

En kolay yol, tuval için bir kap oluşturmak ve yüksekliğini ayarlamaktır:

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

ve ayarla

options: {  
    responsive: true,
    maintainAspectRatio: false
}

Kanvas öğenizi göreceli olarak konumlandırılmış bir üst div'e sarabilir, ardından bu div'e istediğiniz yüksekliği vererek, seçeneklerinizde protectAspectRatio: false ayarını yapabilirsiniz.

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

Bu benim için çalıştı:

Yüksekliği HTML'den ayarlıyorum

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

Sonra en boy oranını korumak için devre dışı bıraktım

options: {
  responsive: true,
  maintainAspectRatio: false,

O haklı. JQuery ile kalmak istiyorsanız bunu yapabilirsiniz

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

veya

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

Grafiğin en boy oranı özelliğini 0 olarak ayarla benim için hile yaptı ...

    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;

Kanvas öğesi için html yükseklik özelliğini şu şekilde kullanmalısınız:

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

Bir kap oluşturdum ve onu görüntüleme portunun istenen yüksekliğine ayarladım (grafiklerin sayısına veya grafiğe özgü boyutlara bağlı olarak):

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

Ekran boyutlarına dinamik olmak için kabı aşağıdaki gibi ayarlıyorum:

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

Elbette çok önemli (defalarca bahsedildiği gibi) optiongrafiğinizin aşağıdaki özelliklerini ayarlayın :

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

Boyutları tuvale de ayarlayabilirsiniz.

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

Ardından , grafiği her zaman belirtilen boyutta tutmak için duyarlı seçenekleri yanlış olarak ayarlayın .

options: {
    responsive: false,
}

Grafiğin yüksekliği manuel olarak ayarlamak yerine üst öğeyi% 100 doldurması gerekiyordu ve sorun, ebeveyn div'in kalan alanı her zaman doldurmasını sağlamaktı.

Duyarlı ve oran seçeneklerini ayarladıktan sonra (ilgili chartjs belgesine bakın ), aşağıdaki css hile yaptı:

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

@Numediaweb tarafından verilen yanıta eklemek için

Başınızı duvara maintainAspectRatio=falseçarpmanız durumunda, çünkü ayarlama talimatlarını izledikten sonra : Kodumu orijinal olarak, bir web sitesinde Angular 2+ ile Chart.js kullanma konusunda aldığım bir örnekten kopyaladım:

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

Bunun doğru bir şekilde çalışmasını sağlamak için gömülü (ve gereksiz) kaldırmanız gerekir. style="display: block" Bunun yerine çevreleyen div için bir sınıf tanımlayın ve yüksekliğini CSS'de tanımlayın.

Bunu yaptıktan sonra, grafiğin duyarlı genişliğe ancak sabit yüksekliğe sahip olması gerekir.