Próbuję kodu przykładowego dla Chart.js given in the docs.Ustawienie szerokości i wysokości
Szerokość i wysokość określa się w tekście elementu canvas przy 400px/400px.
Jednak przy renderowaniu wykresu jest on powiększany do pełnej szerokości strony i obcina skrajnie prawy koniec.
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łótno ważne ...
canvas{
width:1000px !important;
height:600px !important;
}
również
określić responsive:true, nieruchomość pod opcjami ..
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
aktualizacji w ramach opcji dodanych: maintainAspectRatio: false,
Użyj tego, działa dobrze.
<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>
i pod options,
responsive:true,
W moim przypadku, przechodząc responsive: false ramach opcji rozwiązało problem. Nie jestem pewien, dlaczego wszyscy mówią ci, abyś postępował odwrotnie, zwłaszcza, że true jest wartością domyślną.
Można też po prostu otoczyć wykres z pojemnika (według oficjalnego dokumentu 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
}
oraz z opcjami
responsive:true
maintainAspectRatio: false
Works dla mnie
responsive:true
maintainAspectRatio: false
Dziękuję
Dziękuję, twoje 'maintainAspectRatio: false' sprawiło, że wykres jest widoczny. Ale wciąż przecinają prawą stronę. Trafienie na takie problemy już za pomocą ich własnego podstawowego przykładu kodu sprawia, że zastanawiam się, czy plik chart.js jest dobry. (Prawa strona jest nadal odcięta ...) –
To rozwiązuje problem rozmiaru wykresu, wykres nie został przeskalowany, aby go dopasować. Czy istnieje sposób na ustawienie rozmiaru wykresu z wykresu Chart.js? – Firix
Okazuje się, że należy wyłączyć reakcję, aby wykres był zgodny z podanymi rozmiarami. Szkoda, że nie ma sposobu, aby to kontrolować i utrzymać responsywny charakter ... – Firix