ฉันกำลังสร้างโฮมเพจโดยใช้ Bootstrap, JQuery และ Chart.js (v2) ฉันทำให้การติดตั้งใช้งานได้โดยใช้ v1 แต่เพิ่งเข้าสู่ Bower และดาวน์โหลด v2 โดยใช้สิ่งนั้น
ฉันกำลังสร้างตาราง 4 คอลัมน์แต่ละคอลัมน์มีแผนภูมิวงกลม แต่การปรับขนาดใน v2 ทำให้ฉันสับสนในการทำงาน ฉันต้องการให้แผนภูมิตอบสนองเพื่อให้ปรับขนาดได้อย่างเหมาะสมกับอุปกรณ์ขนาดเล็กเช่นแท็บเล็ตและสมาร์ทโฟนและปัญหาอย่างหนึ่งของฉันคือการกำจัดตำนานของแผนภูมิรวมถึงข้อมูลการวางเมาส์เมื่อวางเมาส์เหนือส่วนต่างๆของ แผนภูมิ.
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,
});
});
ถ้าฉันลบช่อง "ป้ายกำกับ" ที่ว่างเปล่าแผนภูมิจะไม่ทำงานอีกต่อไป และจากลักษณะของมันจะมีช่องว่างเล็ก ๆ ที่ด้านบนของแผนภูมิซึ่งอาจบ่งบอกได้ว่ามีการเขียนส่วนหัว แต่เป็นเพียงสตริงว่างเปล่า
ใครมีความคิดเกี่ยวกับวิธีลบคำอธิบายแผนภูมิและคำอธิบายการวางเมาส์ ฉันไม่สามารถเข้าใจวิธีการใช้งานนี้ได้
ฉันจะจับมือ jsfiddle ทันทีที่มีเวลา!
แก้ไข: ลิงก์ไปยังเอกสาร: https://nnnick.github.io/Chart.js/docs-v2/#getting-started