Sto creando una homepage usando Bootstrap, JQuery e Chart.js (v2). La mia implementazione funzionava utilizzando v1, ma recentemente sono entrato in Bower e ho scaricato v2 utilizzando quello.
Sto creando una griglia di 4 colonne ciascuna contenente un grafico a torta, tuttavia il ridimensionamento in v2 è un po 'confuso per me per lavorare. Voglio che i grafici siano reattivi in modo che si adattino correttamente ai dispositivi più piccoli come tablet e smartphone, e uno dei miei problemi è sbarazzarmi della legenda dei grafici e delle informazioni al passaggio del mouse quando si passa il mouse sulle sezioni del mio grafico.
index.html
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">
<canvas id="chart1"></canvas>
</div>
<div class="col-xs-3">
<canvas id="chart1"></canvas>
</div>
<div class="col-xs-3">
<canvas id="chart1"></canvas>
</div>
<div class="col-xs-3">
<canvas id="chart1"></canvas>
</div>
</div>
</div>
</body>
functions.js
$(document).ready(function(){
var canvas = $("#chart1");
var data = {
labels: [],
datasets: [{
data: [10, 10],
backgroundColor: ["#F7464A", "#FDB45C"],
hoverBackgroundColor: ["#FF5A5E", "#FFC870"]
}]
};
var chart1 = new Chart(canvas, {
type: "pie",
data: data,
});
});
Se rimuovo il campo vuoto "etichette" il grafico non funziona più. E a quanto pare c'è una piccola spaziatura nella parte superiore del grafico che potrebbe indicare che le intestazioni sono scritte, ma sono solo stringhe vuote.
Qualcuno ha un'idea di come rimuovere la legenda e la descrizione al passaggio del mouse? Semplicemente non riesco a capire come viene utilizzato
Metterò le mani intorno a un jsfiddle non appena avrò tempo!
EDIT: Link ai documenti: https://nnnick.github.io/Chart.js/docs-v2/#getting-started