Đây là một trong những thư viện JS miễn phí và tốt nhất dành cho biểu đồ. Nó hỗ trợ hiển thị nhiều loại biểu đồ hơn ở phía máy khách.
Trong hướng dẫn này, chúng ta sẽ xem các ví dụ về kết xuất các loại biểu đồ đường khác nhau bằng thư viện Chart.js.
Mục lục
ví dụ nhanh
Thư viện Chart JS yêu cầu 3 thứ được thêm vào HTML của trang web để hiển thị biểu đồ.
- Bước 1: Đưa tệp thư viện Chart JS vào trang HTML mục tiêu.
- Bước 2: Tạo phần tử canvas HTML để hiển thị biểu đồ đường.
- Bước 3: Bắt đầu chức năng thư viện Chart JS với dữ liệu và các tùy chọn cần thiết khác.
<canvas id="line-chart"></canvas>
<script
src="
<script>
new Chart(document.getElementById("line-chart"), {
type : 'line',
data : {
labels : [ 1500, 1600, 1700, 1750, 1800, 1850,
1900, 1950, 1999, 2050 ],
datasets : [
{
data : [ 186, 205, 1321, 1516, 2107,
2191, 3133, 3221, 4783, 5478 ],
label : "America",
borderColor : "#3cba9f",
fill : false
}]
},
options : {
title : {
display : true,
text : 'Chart JS Line Chart Example'
}
}
});
</script>
Tập lệnh trên đề cập đến phần tử canvas đích khi bắt đầu lớp thư viện.
Nó xác định chính xác các bài đọc biểu đồ với các thuộc tính dữ liệu. Ngoài ra, nó chỉ định nhãn dòng và màu đường viền. Ví dụ nhanh này sẽ xuất biểu đồ đường sau cho trình duyệt.
Đầu ra:
Xem bản trình diễn
Biểu đồ đường là cách tốt nhất để hiển thị phân tích ở dạng biểu đồ đường hấp dẫn. Nó cũng giúp so sánh một hoặc nhiều dòng phân tích.
Trong các hướng dẫn trước, chúng ta đã sử dụng các thư viện khác nhau để hiển thị các loại biểu đồ khác nhau trên một trang web. Xem các liên kết dưới đây nếu bạn muốn tham khảo.
Thêm ví dụ về biểu đồ đường bằng Chart JS
Chart JS hỗ trợ tạo nhiều loại biểu đồ đường để vẽ các phối cảnh khác nhau của các điểm dữ liệu.
- Nó hỗ trợ vẽ nhiều dòng điểm dữ liệu trong biểu đồ đường hiển thị so sánh dữ liệu.
- Nó hỗ trợ tạo biểu đồ đường tuyến tính bằng cách áp dụng các công thức với tọa độ x và y.
- Kết xuất các sóng hình sin trong biểu đồ đường JS Biểu đồ với các hàm JS Math.
Trong các phần bên dưới, chúng ta sẽ xem các ví dụ về cách tạo loại biểu đồ đường sau bằng thư viện Chart JS.
- Nhiều đường trong một biểu đồ đường.
- Gridlines – Biểu đồ đường
Biểu đồ JS Nhiều dòng Ví dụ
Nó xuất ra biểu đồ Chart JS với hai biểu đồ đường. Tập lệnh đặt mảng tập dữ liệu cho hai dòng được hiển thị trên biểu đồ.
Tập dữ liệu được định cấu hình với các thuộc tính hiển thị sau ngoài các điểm dữ liệu của biểu đồ đường.
- nhãn mác – để hiển thị chú giải công cụ khi di chuột qua một điểm dữ liệu.
- màu viền – Màu đường viền.
- lấp đầy – để bật hoặc tắt tô sáng vùng biểu đồ.
Trong biểu đồ nhiều đường này, lấp đầy thuộc tính được đặt thành saivì hai khu vực biểu đồ chồng lên nhau.
<!DOCTYPE html>
<html>
<head>
<title>Chart JS Multiple Lines Example</title>
<link rel="stylesheet" href=" type="text/css" />
</head>
<body>
<div class="PHP-container">
<h1>Chart JS Multiple Lines Example</h1>
<div>
<canvas id="line-chart"></canvas>
</div>
</div>
<script
src="
<script>
new Chart(document.getElementById("line-chart"), {
type : 'line',
data : {
labels : [ 1500, 1600, 1700, 1750, 1800, 1850,
1900, 1950, 1999, 2050 ],
datasets : [
{
data : [ 186, 205, 1321, 1516, 2107,
2191, 3133, 3221, 4783, 5478 ],
label : "America",
borderColor : "#3cba9f",
fill : false
},
{
data : [ 1282, 1350, 2411, 2502, 2635,
2809, 3947, 4402, 3700, 5267 ],
label : "Europe",
borderColor : "#e43202",
fill : false
} ]
},
options : {
title : {
display : true,
text : 'Chart JS Multiple Lines Example'
}
}
});
</script>
</body>
</html>
Biểu đồ JS Gridlines – Ví dụ về biểu đồ đường
Tập lệnh JS này định cấu hình các cài đặt giống như ví dụ về biểu đồ nhiều đường ở trên. Ngoài ra, nó cấu hình Chart JS tỉ lệ các thuộc tính để vẽ lưới theo trục x và y.
Các thuộc tính hiển thị sau đây được sử dụng để hiển thị lưới ở cả hai trục của. Biểu đồ đồ thị JS.
- trưng bày – một giá trị boolean để bật hoặc tắt hiển thị dạng lưới trên biểu đồ.
- màu sắc – màu đường viền lưới.
- chiều rộng dòng – kích thước hành trình của đường lưới.
<!DOCTYPE html>
<html>
<head>
<title>Chart JS Gridlines - Line Chart Example</title>
<link rel="stylesheet" href=" type="text/css" />
</head>
<body>
<div class="PHP-container">
<h1>Chart JS Gridlines - Line Chart Example</h1>
<div>
<canvas id="line-chart"></canvas>
</div>
</div>
<script
src="
<script>
new Chart(
document.getElementById("line-chart"),
{
type : 'line',
data : {
labels : [ 1500, 1600, 1700, 1750, 1800,
1850, 1900, 1950, 1999, 2050 ],
datasets : [
{
data : [ 186, 205, 1321, 1516,
2107, 2191, 3133, 3221,
4783, 5478 ],
label : "America",
borderColor : "#3cba9f",
fill : false
},
{
data : [ 1282, 1350, 2411,
2502, 2635, 2809, 3947,
4402, 3700, 5267 ],
label : "Europe",
borderColor : "#e43202",
fill : false
} ]
},
options : {
title : {
display : true,
text : 'Chart JS Gridlines - Line Chart Example'
},
scales : {
x : {
grid : {
display : true,
color: "#0046ff",
lineWidth: 2
}
},
y : {
grid : {
display : true,
color: "#0046ff"
}
}
}
}
});
</script>
</body>
</html>
Thêm chi tiết về những điều cơ bản của thư viện Chart JS
Biết thêm về thư viện JS rất tốt này sẽ hữu ích để sử dụng biểu đồ này một cách tự tin trong sản xuất.
Nếu không chỉ định các tùy chọn tập dữ liệu hoặc thuộc tính hiển thị, các tùy chọn mặc định sẽ được áp dụng. Danh sách sau đây cho biết mức độ của các tùy chọn Chart.js sẽ được giải quyết về ngữ cảnh. Đọc thêm về tài liệu giải quyết tùy chọn được cung cấp bởi thư viện Chart JS.
Tập dữ liệu và thuộc tính phần tử đối với dữ liệu và tùy chọn
- dữ liệu.datasets[index] – các tùy chọn chỉ dành cho tập dữ liệu này.
- options.datasets.line – tùy chọn cho tất cả các bộ dữ liệu dòng.
- options.elements.line – tùy chọn cho tất cả các phần tử dòng.
- options.elements.point – tùy chọn cho tất cả các phần tử điểm.
- tùy chọn – tùy chọn cho toàn bộ biểu đồ.
Thuộc tính hiển thị
- màu nền
- màu viền
- chiều rộng biên giới
- lấp đầy
- hoverBiên giớiMàu
- nhãn mác
- điểmPhong cách
- xAxisID
- yAxisID
tùy chọn tùy chỉnh
Chart JS chấp nhận gọi lại tùy chỉnh để được gọi khi hiển thị từng điểm dữ liệu.
Hàm gọi lại chấp nhận tham chiếu ngữ cảnh để lấy phạm vi giao diện người dùng. Hệ thống phân cấp ngữ cảnh được hiển thị trong sơ đồ bên dưới.
Tùy chọn có thể lập chỉ mục
Các tùy chọn có thể lập chỉ mục được sử dụng để xác định các thuộc tính cho mục dữ liệu chart.js tại một chỉ mục cụ thể.
Nó có một mảng ánh xạ để liên kết một thuộc tính tại một chỉ mục cụ thể với điểm dữ liệu của biểu đồ tại cùng một chỉ mục.
Nếu độ dài mảng thuộc tính tùy chọn mảng nhỏ hơn mảng dữ liệu, thì thuộc tính sẽ được lặp lại.
Đoạn mã dưới đây chứa các tùy chọn thiết lập màu của điểm biểu đồ đường. Nó chỉ có ba điểmNềnMàu trong mảng. Nó sẽ lặp đến mảng dữ liệu gồm 10 phần tử.
datasets : [{
data : [ 186, 205, 1321, 1516, 2107,
2191, 3133, 3221, 4783, 5478 ],
label : "America",
borderColor : "#3cba9f",
pointBackgroundColor: [
'#354abb',
'#bb3c43'
],
pointBorderColor: [
'#354abb',
'#bb3c43'
],
fill: false,
borderWidth: 12
}]
Các loại biểu đồ khác được thư viện Chart.js hỗ trợ
Thư viện Chart JS cũng hỗ trợ tạo các loại biểu đồ khác được liệt kê bên dưới. Chúng ta hãy xem ví dụ về việc tạo một vài biểu đồ dưới đây trong tương lai.
- Biểu đồ vùng
- Biểu đồ cột
- Biểu đồ bong bóng
- biểu đồ bánh rán
- biểu đồ đường
- biểu đồ hỗn hợp
- Biểu đồ vùng cực
- biểu đồ ra đa
- Biểu đồ phân tán
Xem DemoTải về
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