Biểu đồ đo là thang đo để đo lường hiệu suất giữa mục tiêu. Vâng! Nỗ lực của tôi trong việc xác định ‘Máy đo’. Bài viết này sử dụng thư viện ChartJS JavaScript để tạo một cuộc trò chuyện đánh giá.
Ví dụ dưới đây tạo ra một đồng hồ tốc độ ở dạng thay đổi thước đo. Nó đạt được điều này với gõ = bánh rán. Các tùy chọn khác, phần cắt bỏ, xoay và chu vi, tạo nên chế độ xem biểu đồ đo dự kiến.
<!DOCTYPE html>
<html>
<head>
<title>Gauge Chart Example using Chart.js</title>
<script src="
</head>
<body>
<canvas id="gaugeChart"></canvas>
<script>
// data for the gauge chart
// you can supply your own values here
// max is the Gauge's maximum value
var data = {
value: 200,
max: 300,
label: "Progress"
};
// Chart.js chart's configuration
// We are using a Doughnut type chart to
// get a Gauge format chart
// This is approach is fine and actually flexible
// to get beautiful Gauge charts out of it
var config = {
type: 'doughnut',
data: {
labels: [data.label],
datasets: [{
data: [data.value, data.max - data.value],
backgroundColor: ['rgba(54, 162, 235, 0.8)', 'rgba(0, 0, 0, 0.1)'],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutoutPercentage: 85,
rotation: -90,
circumference: 180,
tooltips: {
enabled: false
},
legend: {
display: false
},
animation: {
animateRotate: true,
animateScale: false
},
title: {
display: true,
text: data.label,
fontSize: 16
}
}
};
// Create the chart
var chartCtx = document.getElementById('gaugeChart').getContext('2d');
var gaugeChart = new Chart(chartCtx, config);
</script>
</body>
</html>
Tập lệnh ví dụ nhanh ở trên tuân theo các bước bên dưới để hiển thị biểu đồ đo với dữ liệu và các tùy chọn.
Nhiều bước tương tự như tạo bất kỳ biểu đồ nào khác bằng thư viện này. Chúng ta đã thấy nhiều ví dụ trong thư viện ChartJS. Bạn có thể bắt đầu với ví dụ về biểu đồ thanh ChartJS nếu bạn chưa quen với thư viện JavaScript này.
Dữ liệu và các tùy chọn là những yếu tố chính làm thay đổi chế độ xem biểu đồ. Phần này có ghi chú ngắn để biết thêm thông tin về dữ liệu và mảng tùy chọn được tạo trong JavaScript.
Ví dụ JavaScript này sử dụng một mảng dữ liệu tĩnh để tạo biểu đồ đo. Thay vào đó, bạn có thể cung cấp dữ liệu động từ cơ sở dữ liệu hoặc bất kỳ nguồn bên ngoài nào.
Mảng dữ liệu có nhãn biểu đồ, mục tiêu và giá trị hiện tại. Giá trị mục tiêu là giới hạn tối đa của thang biểu đồ đo. Giá trị hiện tại là một điểm đạt được để được đánh dấu.
Sử dụng các giá trị này, tập lệnh này chuẩn bị tập dữ liệu biểu đồ đo.
Mảng tùy chọn là một cấu hình ảnh hưởng đến hình thức của biểu đồ.
ChartJS cho phép các cấu hình nổi bật trải nghiệm chế độ xem biểu đồ tốt nhất. Một số tùy chọn dành riêng cho biểu đồ đo được liệt kê bên dưới.
Xem thêm tin mới và bổ ích tại:
– Kiến thức gia đình
– Tri thức đời sống
– Kênh youtube Kiến thức gia đình