Đây là mã đã sẵn sàng để ngay lập tức hoàn thành các khối. Đây là nền tảng của chart js. Để bắt đầu với nó, hãy đảm bảo bạn đã có nó sẵn.
Bắt đầu với Chart.JS
Chỉ cần sao chép mã dưới đây và nó sẽ tức thì tạo ra một biểu đồ.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getting Started with Chart JS with www.chartjs3.com</title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartMenu {
width: 100vw;
height: 40px;
background: #1A1A1A;
color: rgba(54, 162, 235, 1);
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100vw;
height: calc(100vh - 40px);
background: rgba(54, 162, 235, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 700px;
padding: 20px;
border-radius: 20px;
border: solid 3px rgba(54, 162, 235, 1);
background: white;
}
</style>
</head>
<body>
<div class="chartMenu">
<p>WWW.CHARTJS3.COM (Chart JS <span id="chartVersion"></span>)</p>
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
<script>
// setup
const data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Weekly Sales',
data: [18, 12, 6, 9, 12, 3, 9],
backgroundColor: [
'rgba(255, 26, 104, 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)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 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)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
}]
};
// config
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
// Instantly assign Chart.js version
const chartVersion = document.getElementById('chartVersion');
chartVersion.innerText = Chart.version;
</script>
</body>
</html>Các khối Chart JS
Tài liệu Chart JS đang chuyển dần sang khái niệm "blocks". Mặc định có 3 blocks. Đó là khối setup hoặc data, khối config và khối render hoặc init (khởi tạo). Ba khối này được coi là bộ xương của một biểu đồ.
Bạn có thể có thêm các khối nếu cần. Các khối bổ sung thường được thêm vào khi một số phần trở nên phức tạp hơn.
Khối Thiết lập hoặc Khối Dữ liệu
Khối setup cũng được xem xét là khối dữ liệu. Khối này về cơ bản là một hằng số (biến không thay đổi) bao gồm nhiều đối tượng JavaScript liên quan đến dữ liệu. Điều này có thể là bất cứ điều gì từ các điểm dữ liệu, nhãn, màu nền, màu hover và nhiều thông tin khác.
Các giá trị hằng số khác có thể được đặt ở đây liên quan đến các giá trị hoặc điểm dữ liệu của biểu đồ. Mã khối thiết lập hoặc khối dữ liệu trông giống như thế này và luôn nên là phần đầu tiên để tải. Bởi vì tất cả các khối khác phụ thuộc vào khối dữ liệu.
// setup
const data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Weekly Sales',
data: [18, 12, 6, 9, 12, 3, 9],
backgroundColor: [
'rgba(255, 26, 104, 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)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 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)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
}]
};Khối Cấu hình
Khối cấu hình chứa tất cả các cấu hình của biểu đồ. Khối cấu hình nên được đặt trước khối render. Bởi vì khối này thường phụ thuộc vào khối dữ liệu do các giá trị trong dữ liệu được sử dụng trong cấu hình data biến hằng số const.
Ba phần chính là loại biểu đồ, tùy chọn và biến dữ liệu liên kết với khối thiết lập hoặc dữ liệu. Bạn có thể thấy trong mã là "data" là một biến sử dụng mã Javascript ES6.
// config
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};Chúng tôi sử dụng "data" chỉ khi chúng tôi có một giá trị đối tượng (object) mà GIỐNG với biến hằng số (const). Điều này có nghĩa là phía trên là một cách viết tắt.data,chỉ khi chúng ta có một giá trị đối tượng BẰNG với biến const. Nếu biến const và biến đối tượng giống nhau, chúng ta có thể làm điều này. Điều này có nghĩa là đoạn mã trên cùng là một cách viết tắt.
Nếu biến hằng số (const) khác biệt trong trường hợp đó, chúng ta cần viết nó trong mã đầy đủ như thế này. Bạn thấy bây giờ rằng biến hằng số và giá trị đối tượng (object) không giống nhau nên chúng ta cần viết mã một cách chi tiết hơn. Xem bên dưới.
// config
const config = {
type: 'bar',
data: data2,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};Khối Render hoặc Khối Khởi tạo
Khối cuối cùng luôn phải nằm ở cuối cùng là khối render hoặc khởi tạo. Khối này vẽ biểu đồ lên bề mặt canvas dựa trên toàn bộ mã ở trên. Điều này có nghĩa rằng mọi khối phải được tải trước khi khối này được tải. Nếu không, nó sẽ gây ra lỗi và có thể loại bỏ một số khối mã cụ thể.
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);Mã getElementById đề cập đến id của canvas được đặt tên trong tài liệu HTML. Trong ví dụ này, nó được đặt tên là "myChart", nhưng bạn có thể thay đổi nó thành bất kỳ cái gì bạn muốn. Chỉ cần đảm bảo bạn khớp đúng tên id của canvas.
Vietnamese 
English 
Chinese 
French 
German 
Korean 
Portuguese (Portugal) 
Portuguese (Brazil) 
Spanish
2 trả lời trong “Getting Started”
Its nice and working fine but is not working when creating another chart using the same technique in a same page. I need similar charts to be created 3 times in a single page showing different stats. Can you show how to do that?
Thank you for your question. You issue is ES6 shorthands. Make sure you watch the video on this page where I explain this.
Else you can watch this video:
https://youtu.be/CjlllW2RUrA