Ich erstelle eine Homepage mit Bootstrap, JQuery und Chart.js (v2). Ich hatte meine Implementierung mit v1, bin aber erst kürzlich in Bower eingestiegen und habe v2 damit heruntergeladen.
Ich erstelle ein Raster mit 4 Spalten, die jeweils ein Kreisdiagramm enthalten. Die Skalierung in Version 2 ist jedoch verwirrend, damit ich arbeiten kann. Ich möchte, dass die Diagramme reagieren, damit sie mit kleineren Geräten wie Tablets und Smartphones richtig skaliert werden können. Eines meiner Probleme besteht darin, die Legende der Diagramme sowie die Schwebeinformationen zu entfernen, wenn Sie mit der Maus über die Abschnitte meines Diagramms fahren Diagramm.
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,
});
});Wenn ich das leere Feld "Beschriftungen" entferne, funktioniert das Diagramm nicht mehr. Und wie es aussieht, gibt es oben im Diagramm einen kleinen Abstand, der darauf hinweisen könnte, dass die Überschriften geschrieben sind, aber es sind nur leere Zeichenfolgen.
Hat jemand eine Idee, wie man die Legende und die Schwebebeschreibung entfernt? Ich kann mich einfach nicht vorstellen, wie das verwendet wird
Ich werde eine jsfiddle in die Hände bekommen, sobald ich Zeit habe!
BEARBEITEN: Link zu den Dokumenten: https://nnnick.github.io/Chart.js/docs-v2/#getting-started