Genişliği ve yüksekliği ayarlama

88

Dokümanlarda verilen Chart.js örnek kodunu deniyorum .

Genişlik ve yükseklik, tuval öğesinde 400px / 400px'de satır içinde belirtilir.

Ancak grafiği oluştururken tam sayfa genişliğine kadar büyütülür ve en sağ tarafı keser.

Grafiğin genişliğini / yüksekliğini nasıl / nerede kontrol etmem gerekiyor?

This is some bogus text because SO prohibits linking to Codepen otherwise.

chart.js

— Fellow Stranger
kaynak

94

Kanvas stili genişliğini geçersiz kılabilirsiniz! Önemli ...

canvas{

  width:1000px !important;
  height:600px !important;

}

Ayrıca

responsive:true,seçenekler altında özelliği belirtin ..

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

eklenen seçenekler altında güncelleme: maintainAspectRatio: false,

bağlantı: http://codepen.io/theConstructor/pen/KMpqvo

— KpTheConstructor
kaynak

13

Teşekkürler maintainAspectRatio: false, grafiği görüntülenebilir hale getirdiniz. Ama yine de sağ tarafı kesiyor. Bu tür sorunları zaten kendi temel örnek kodlarıyla ele almak, chart.js'nin iyi bir bahis olduğunu merak etmeme neden oluyor. (Sağ taraf hala kesik ...)

— Fellow Stranger

Bu, grafik boyutu sorununu çözer, grafik ona sığacak şekilde ölçeklenmemiştir. Grafik boyutunu Chart.js içinden ayarlamanın bir yolu var mı?

— Firix

7

Grafiğin kendisine verilen boyutlara uymasını sağlamak için duyarlı olarak kapatmanız gerektiği ortaya çıktı. Bunu kontrol etmenin ve duyarlı doğayı korumanın bir yolu olmadığı için utanç

— verici

2

Teşekkür ederim. Sizin maintainAspectRatiogerçekten benim için yardımcı olur.

— Arsman Ahmad

"! Önemli" yi kullanmak, işe yarasa da bunu çözmenin doğru yolu değildir. Aşağıdaki @Nicolas çözümü "tuvali bir div içine sarmak" daha iyi bir yoldur, çünkü tuvali olmasını istediğimiz şekilde yeniden boyutlandırma üzerinde kontrole sahip oluruz.

— Abhishek Boorugu

54

Grafiği kapsayıcıyla da çevreleyebilirsiniz (resmi belgeye göre http://www.chartjs.org/docs/latest/general/responsive.html#important-note )

<div class="chart-container">
    <canvas id="myCanvas"></canvas>
</div>

CSS

.chart-container {
    width: 1000px;
    height:600px
}

ve seçeneklerle

responsive:true
maintainAspectRatio: false

— Nicolas
kaynak

1

Bu çalışıyor. Buradaki anahtar, bir dış div kullanmak ve genişliği ve yüksekliği tuval öğesi yerine bunun üzerinde ayarlamaktır.

— John Doherty

Bunun çalışması için, grafik-konteyner göreceli olarak konumlandırılmalıdır.

— Sanju

benim için çalışıyor ama sadece !importantAngular projesinde

— Артур Гудиев

23

Benim durumumda, responsive: falseseçeneklerin altından geçmek sorunu çözdü. Neden herkesin size tersini yapmanızı söylediğinden emin değilim, özellikle de varsayılan değer doğru olduğu için.

— Antimon
kaynak

1

Burada aynı. Ayar responsive: true, grafiğin görünümünü tamamen çarpıttı.

— Paul

benim için çalışıyor ama sadece !importantAngular

— projemde çalışıyor

4

Benim için de çalışıyor

responsive:true
maintainAspectRatio: false


<div class="row">
        <div class="col-xs-12">
            <canvas id="mycanvas" width="500" height="300"></canvas>
        </div>
    </div>

Teşekkür ederim

— subramanya46
kaynak

2

Göreli bir ana unsur kullanmaktan kimsenin bahsetmediğine inanamıyorum.

Kod:

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="chart"></canvas>
</div>

Kaynaklar: Resmi belgeler

— R. Gurung
kaynak

0

Değil yukarıda ancak kullanılarak belirtilen max-widthveya max-heightaynı zamanda tuval eleman üzerinde bir olasılık olduğunu.

— Ukuser32
kaynak

0

Aşağıdakiler benim için çalıştı - ancak bunu "seçenekler" parametresine koymayı unutmayın.

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    maintainAspectRatio: false,
    responsive:true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

— Dazeh
kaynak

0

Bu benim durumumda yardımcı oldu:

options: {
    responsive: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                min:0,
                max:100
            }
        }]
    }
}

— Omid N
kaynak

0

aspectRatioİhtiyaçlarınıza göre değiştirebilirsiniz :

options:{
     aspectRatio:4 //(width/height)
}

— Yashvendar Badsiwal
kaynak

Bunun nasıl çalıştığını açıklayabilir misin? 4en boy oranı değildir. Yorumunuz diyor, (width/height)ancak bunun nasıl uygulanması gerektiği belli değil. Bunu set olarak geçirmenin bir yolu var mı? Ya da tam anlamıyla önerilen genişliği önerilen yüksekliğe bölmeyi mi kastediyorsunuz, örneğin 3: 4 olacak şekilde 0.75?

— Jeremy Caney

-3

Bunu kullanın, iyi çalışıyor.

<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>

ve altında options,

responsive:true,

— Udara
kaynak