Chart.js
Chart.js là một thư viện JavaScript miễn phí để tạo biểu đồ dựa trên HTML. Đây là một trong những thư viện trực quan hóa đơn giản nhất dành cho JavaScript và đi kèm với nhiều loại biểu đồ tích hợp sẵn:
- Biểu đồ phân tán
- Biểu đồ đường
- Biểu đồ cột
- Biểu đồ tròn
- Biểu đồ bánh rán
- Biểu đồ bong bóng
- Biểu đồ khu vực
- Biểu đồ radar
- Biểu đồ hỗn hợp
Làm cách nào để sử dụng Chart.js?
1. Thêm liên kết đến CDN (Mạng phân phối nội dung) cung cấp:
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>
2. Thêm <canvas> vào vị trí trong HTML mà bạn muốn vẽ biểu đồ:
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
Phần tử canvas phải có id duy nhất.
Cú pháp biểu đồ thanh điển hình:
const myChart = new Chart("myChart", {
type: "bar",
data: {},
options: {}
});
Cú pháp biểu đồ đường điển hình:
const myChart = new Chart("myChart", {
type: "line",
data: {},
options: {}
});
Biểu đồ thanh
Mã nguồn
const xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
const yValues = [55, 49, 44, 24, 15];
const barColors = ["red", "green","blue","orange","brown"];
new Chart("myChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {...}
});
Sắc thái màu:
const barColors = [
"rgba(0,0,255,1.0)",
"rgba(0,0,255,0.8)",
"rgba(0,0,255,0.6)",
"rgba(0,0,255,0.4)",
"rgba(0,0,255,0.2)",
];
Thanh ngang
Chỉ cần thay đổi loại từ "bar" thành "horizontalBar":
type: "horizontalBar",
Biểu đồ hình tròn
Ví dụ
new Chart("myChart", {
type: "pie",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {
title: {
display: true,
text: "World Wide Wine Production"
}
}
});
Biểu đồ bánh rán
Điểm phân tán
Giá nhà so với kích thước
Mã nguồn
const xyValues = [
{x:50, y:7},
{x:60, y:8},
{x:70, y:8},
{x:80, y:9},
{x:90, y:9},
{x:100, y:9},
{x:110, y:10},
{x:120, y:11},
{x:130, y:14},
{x:140, y:14},
{x:150, y:15}
];
new Chart("myChart", {
type: "scatter",
data: {
datasets: [{
pointRadius: 4,
pointBackgroundColor: "rgba(0,0,255,1)",
data: xyValues
}]
},
options:{...}
});
Biểu đồ đường
Giá nhà so với kích thước
Mã nguồn
const xValues = [50,60,70,80,90,100,110,120,130,140,150];
const yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
backgroundColor:"rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues
}]
},
options:{...}
});
Nếu bạn đặt borderColor thành 0, bạn có thể phân tán biểu đồ đường:
borderColor: "rgba(0,0,0,0)",
Nhiều dòng
Mã nguồn
const xValues = [100,200,300,400,500,600,700,800,900,1000];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
borderColor: "red",
fill: false
},{
data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
borderColor: "green",
fill: false
},{
data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
borderColor: "blue",
fill: false
}]
},
options: {
legend: {display: false}
}
});
Đồ thị tuyến tính
Mã nguồn
const xValues = [];
const yValues = [];
generateData("x * 2 + 7", 0, 10, 0.5);
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
fill: false,
pointRadius: 1,
borderColor: "rgba(255,0,0,0.5)",
data: yValues
}]
},
options: {...}
});
function generateData(value, i1, i2, step = 1) {
for (let x = i1; x <= i2; x += step) {
yValues.push(eval(value));
xValues.push(x);
}
}
Đồ thị hàm số
Tương tự với Đồ thị tuyến tính Chỉ cần thay đổi (các) tham số generateData:
generateData("Math.sin(x)", 0, 10, 0.5);
