Ustawianie szerokości i wysokości

85

Wypróbowuję przykładowy kod Chart.js podany w dokumentach .

Szerokość i wysokość są określane bezpośrednio w elemencie canvas jako 400px / 400px.

Ale podczas renderowania wykres jest powiększany do pełnej szerokości strony i odcina prawy koniec.

Jak / gdzie mam kontrolować szerokość / wysokość wykresu?

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

chart.js

— Kolega nieznajomy
źródło

89

Możesz zmienić szerokość stylu płótna! Ważne ...

canvas{

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

}

również

określić responsive:true,właściwość w opcjach ..

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

aktualizacja pod dodanymi opcjami: maintainAspectRatio: false,

link: http://codepen.io/theConstructor/pen/KMpqvo

— KpTheConstructor
źródło

11

Dziękuję, maintainAspectRatio: falseudostępniliście wykres. Ale nadal odcinając prawą stronę. Trafianie w tego rodzaju problemy już z ich własnym podstawowym kodem przykładowym sprawia, że zastanawiam się, czy chart.js to dobry zakład. (Prawa strona wciąż jest odcięta ...)

— Fellow Stranger

To rozwiązuje problem rozmiaru wykresu, wykres nie został przeskalowany, aby go dopasować. Czy istnieje sposób na ustawienie rozmiaru wykresu z poziomu Chart.js?

— Firix

7

Okazuje się, że musisz wyłączyć responsywność, aby wykres był zgodny z podanymi mu rozmiarami. Szkoda, że nie ma sposobu, aby to kontrolować i zachować responsywny charakter ...

— Firix

2

Dziękuję Ci. Twój maintainAspectRationaprawdę pomaga mi.

— Arsman Ahmad,

Używanie „! Important” nie jest właściwym sposobem rozwiązania tego problemu, mimo że działa. Rozwiązanie @Nicolas poniżej „zawijanie płótna w element div” jest lepszym sposobem, ponieważ mielibyśmy kontrolę nad zmianą rozmiaru płótna w taki sposób, w jaki chcemy.

— Abhishek Boorugu

52

Możesz również po prostu otoczyć wykres kontenerem (zgodnie z oficjalnym dokumentem 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
}

i z opcjami

responsive:true
maintainAspectRatio: false

— Nicolas
źródło

1

To działa. Kluczowe jest tutaj użycie zewnętrznego elementu div i ustawienie szerokości i wysokości zamiast elementu canvas.

— John Doherty

Aby to zadziałało, kontener z wykresami powinien być względnie ustawiony.

— Sanju

działa dla mnie, ale tylko !importantw projekcie Angular

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

22

W moim przypadku przejście responsive: falsepod opcje rozwiązało problem. Nie jestem pewien, dlaczego wszyscy mówią ci, abyś zrobił coś przeciwnego, zwłaszcza że prawda jest domyślna.

— Antymon
źródło

1

To samo tutaj. Ustawienie responsive: truecałkowicie wypaczyło wygląd wykresu.

— Paweł

działa dla mnie, ale tylko !importantw moim projekcie Angular

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

2

U mnie też działa

responsive:true
maintainAspectRatio: false


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

Dziękuję Ci

— subramanya46
źródło

2

Nie mogę uwierzyć, że nikt nie mówił o używaniu względnego elementu nadrzędnego.

Kod:

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

Źródła: oficjalna dokumentacja

— R. Gurung
źródło

0

Nie wspomniano powyżej, ale istnieje również możliwość zastosowania max-widthlub max-heightna płótnie.

— Ukuser32
źródło

0

Poniższe działało dla mnie - ale nie zapomnij umieścić tego w parametrze "opcje".

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

— Dazeh
źródło

0

Pomogło to w moim przypadku:

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

— Omid N
źródło

-3

Użyj tego, działa dobrze.

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

i poniżej options,

responsive:true,

— Udara
źródło