Saya membuat beranda menggunakan, Bootstrap, JQuery dan Chart.js (v2). Saya memiliki implementasi saya bekerja menggunakan v1, tetapi baru-baru ini saya masuk ke Bower dan mengunduh v2 menggunakan itu.
Saya membuat kisi 4 kolom masing-masing berisi diagram lingkaran, namun penskalaan di v2 agak membingungkan bagi saya untuk mulai bekerja. Saya ingin bagan menjadi responsif sehingga dapat diskalakan dengan benar dengan perangkat yang lebih kecil seperti tablet dan ponsel cerdas, dan salah satu masalah saya adalah menyingkirkan legenda bagan serta informasi hover saat mengarahkan mouse ke bagian saya. grafik.
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,
});
});Jika saya menghapus kolom "label" kosong, diagram tidak berfungsi lagi. Dan dari tampilannya ada spasi kecil di bagian atas grafik yang bisa menandakan bahwa headernya tertulis, tapi itu hanyalah string kosong.
Adakah yang punya ide tentang cara menghapus legenda, dan deskripsi hover? Saya tidak bisa memikirkan bagaimana ini digunakan
Saya akan mendapatkan jsfiddle segera setelah saya punya waktu!
EDIT: Tautan ke dokumen: https://nnnick.github.io/Chart.js/docs-v2/#getting-started