{fullwidth}
hello xin chào mọi người nha, chúc mọi người một ngày mới tốt lành. Hôm nay thì mình xin chia sẽ cho anh em cách mà chúng ta có thể tạo biểu đồ dạng cột trong blogger hoặc nó còn gọi là thêm Chart.js vào blogger.
 |
| Thêm biểu đồ dạng cột trong blogger |
Thêm Chart.js vào blogger có tác dụng gì ???
Về cơ bản, tiện ích Biểu diễn Đồ họa là một Tiện ích rất có lợi, nó cải thiện cách thể hiện dữ liệu trong blog. Nó còn thể hiện về thống kê chỉ số của một thành phần nào đó cần phải thống kê.
Các bạn có thể xem Demo tại đây nha.
Cách thêm biểu đồ dạng cột vào trong blogger
Bước 1: thêm CDN Js vào trong blogger
các bạn hãy thêm mã bên dưới vào phía trên của thẻ </head> hoặc thêm trực tiếp vào trang mà các bạn đã tạo sẵn trong blogger
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
Bước 2: Thêm mã HTML tạo chart.js
các bạn vào blogger
- tạo một trang mới hoặc là đăng trang hoặc bài viết đều được
- chuyển sang định dạng HTML
- sao chép toàn bộ mã bên dưới và dáng vào bên trong trang vừa tạo
<canvas id="myChart" width="400" height="400"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 6, 9, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>trong đó thì mọi người có thể tùy chỉnh bảng theo tùy ý mọi người. - 400 là chiều rộng và cao cùa biểu đồ
- 'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange' là những cột, mọi người có thể thêm những cột mọi người có thể thêm nhiều một các bằng các là đạt các cột đó trong dấu ngoặc và phân các nó bằng dấu phẩy (,)
- 12, 19, 3, 6, 9, 3 là gí trị cùa cột mọi người có thể thêm nhiều giá trị khác và phân cách chúng bằng dấu phẩy (,)
Phần kết luận
Vì vậy, hôm nay chúng ta đã thảo luận về Cách thêm Chart.js vào Blogger. Tôi hy vọng bạn thích bài đăng này vui lòng cho một bình luận bên dưới. Nếu bạn đang gặp vấn đề khi thực hiện điều này, vui lòng liên hệ với tôi. Hãy truy cập thường xuyên để nhận được nhiều thông tin cập nhật như thế này.
Design by @KiMiDev
