Tworzę stronę domową za pomocą Bootstrap, JQuery i Chart.js (v2). Moja implementacja działała przy użyciu v1, ale ostatnio właśnie dostałem się do Bower i pobrałem v2 używając tego.
Tworzę siatkę z 4 kolumnami, z których każda zawiera wykres kołowy, jednak skalowanie w wersji 2 jest dla mnie trochę mylące, aby zacząć działać. Chcę, aby wykresy były responsywne, aby odpowiednio skalowały się z mniejszymi urządzeniami, takimi jak tablety i smartfony, a jednym z moich problemów jest pozbycie się legendy wykresów, a także informacji o najechaniu kursorem myszy na sekcje mojego wykres.
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,
});
});
Jeśli usunę puste pole „etykiety”, wykres przestanie działać. Wygląda na to, że u góry wykresu jest mały odstęp, który może wskazywać, że nagłówki są zapisane, ale są to po prostu puste ciągi.
Czy ktoś ma pomysł, jak usunąć legendę i opis najechania? Po prostu nie mogę pojąć, jak to jest używane
Jak tylko będę mieć czas, będę mógł objąć jsfiddle!
EDYCJA: Link do dokumentów: https://nnnick.github.io/Chart.js/docs-v2/#getting-started