Tôi đang tạo trang chủ bằng Bootstrap, JQuery và Chart.js (v2). Tôi đã có triển khai của mình hoạt động bằng cách sử dụng v1, nhưng gần đây chỉ cần truy cập vào Bower và tải xuống v2 bằng cách sử dụng đó.
Tôi đang tạo một lưới gồm 4 cột, mỗi cột chứa một biểu đồ hình tròn, tuy nhiên việc chia tỷ lệ trong v2 khiến tôi khó hiểu khi làm việc. Tôi muốn các biểu đồ phải phản hồi để chúng chia tỷ lệ phù hợp với các thiết bị nhỏ hơn như máy tính bảng và điện thoại thông minh và một trong những vấn đề của tôi là loại bỏ phần chú thích của biểu đồ cũng như thông tin di chuột khi di chuột qua các phần của tôi đồ thị.
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,
});
});
Nếu tôi xóa trường "nhãn" trống, biểu đồ không hoạt động nữa. Và nhìn qua thì có một khoảng cách nhỏ ở đầu biểu đồ có thể cho biết rằng các tiêu đề đã được viết, nhưng chúng chỉ là các chuỗi trống.
Có ai có ý tưởng về cách xóa chú thích và mô tả khi di chuột qua không? Tôi chỉ đơn giản là không thể hiểu được cách sử dụng cái này
Tôi sẽ chạm tay vào jsfiddle ngay khi có thời gian!
CHỈNH SỬA: Liên kết đến tài liệu: https://nnnick.github.io/Chart.js/docs-v2/#getting-started