Chart.js
Chart.js là 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 các loại biểu đồ tích hợp sau:
- 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?
Chart.js rất dễ sử dụng.
Đầu tiên , 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>
Sau đó , thêm <canvas> vào nơi 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.
Đó là tất cả!
Cú pháp biểu đồ phân tán điển hình:
const myChart = new Chart("myChart", {
type: "scatter",
data: {},
options: {}
});
Cú pháp biểu đồ đường điển hình:
const myChart = new Chart("myChart", {
type: "line",
data: {},
options: {}
});
Cú pháp biểu đồ thanh điển hình:
const myChart = new Chart("myChart", {
type: "bar",
data: {},
options: {}
});
Đ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);
Biểu đồ thanh
Mã nguồn
var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var yValues = [55, 49, 44, 24, 15];
var 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:
var 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"
}
}
});