Sto provando il codice di esempio per Chart.js given in the docs.Impostazione larghezza e altezza
Larghezza e altezza sono specificate in linea sull'elemento canvas a 400px/400px.
Ma quando si esegue il rendering del grafico viene ingrandito a tutta la larghezza della pagina e si interrompe l'estremità estrema destra.
Come/dove dovrei per controllare la larghezza/altezza del grafico?
This is some bogus text because SO prohibits linking to Codepen otherwise.
È possibile ignorare la larghezza stile tela importante ...
canvas{
width:1000px !important;
height:600px !important;
}
anche
specificare responsive:true, proprietà sotto opzioni ..
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
aggiornamento sotto opzioni aggiunte: maintainAspectRatio: false,
collegamento: http://codepen.io/theConstructor/pen/KMpqvo
Utilizzare questo, funziona correttamente.
<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>
e sotto options,
responsive:true,
Nel mio caso, passando responsive: false in Opzioni risolto il problema. Non sono sicuro del motivo per cui tutti ti dicono di fare il contrario, soprattutto perché il vero è il default.
Si può anche semplicemente circondare il grafico con il contenitore (in base al doc ufficiale 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
}
e con opzioni di
responsive:true
maintainAspectRatio: false
funziona per me
responsive:true
maintainAspectRatio: false
Grazie
Grazie, il tuo 'maintainAspectRatio: false' ha reso il grafico visualizzabile. Ma ancora tagliando il lato destro però. Colpire questo tipo di problemi già con il loro codice di esempio di base mi fa meraviglia che il chart.js sia una buona scommessa. (Il lato destro è ancora tagliato ...) –
Questo risolve il problema della dimensione del grafico, il grafico non è ridimensionato per adattarlo. C'è un modo per impostare la dimensione del grafico all'interno di Chart.js? – Firix
Si scopre che è necessario disattivare la risposta per fare in modo che il grafico rispetti le dimensioni ad esso assegnate. Peccato che non ci sia modo di controllarlo e mantenere la natura reattiva ... – Firix