Ustawianie szerokości i wysokości

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.

Zobacz przykład

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

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

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

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

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.

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

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

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

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

Pomogło to w moim przypadku:

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

Użyj tego, działa dobrze.

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

i poniżej options,

responsive:true,