Luôn muốn học Chart JS nhưng cần hiểu hướng dẫn một cách trực quan hơn? Trang web này cung cấp hướng dẫn về Chart JS với một cách tiếp cận trực quan hơn. Mục tiêu ở đây là đảm bảo hiểu sâu hơn.
Hướng dẫn Video về Chart JS
Chart JS là một thư viện JavaScript kỳ diệu với nhiều tùy chọn trong khi vẫn khá nhỏ gọn. Điều đó làm cho Chart JS trở thành một kho báu thực sự. Có rất nhiều khả năng, nhưng nếu bạn không hiểu cách sử dụng, bạn có thể không thấy được chúng. Trang web này sẽ hướng dẫn về Chart JS và tất cả các khả năng của nó. Sẵn sàng khám phá chưa?
Chart.js là gì?
Thường bạn sẽ nghe nói rằng Chart.js là một thư viện hoặc khung làm việc với Javascript để vẽ biểu đồ trong Javascript. Tuy nhiên, điều khá đáng ngạc nhiên là khi người ta sử dụng Chart.js, họ không thấy sự kết nối đó với Javascript.
Nhiều người thường quên rằng Chart.js dựa trên Javascript. Điều mà tôi đề cập đến là họ không thấy cách kết hợp các mảng Javascript cùng với Chart.js do sự phức tạp của thẻ canvas mà Chart.js sử dụng.
Một biểu đồ được vẽ trong một thẻ canvas. Mã mà Chart.js sử dụng chủ yếu là các hướng dẫn để vẽ các đường, điểm, hình tròn và các hình khác trong một thẻ canvas tại các tọa độ x và y chính xác. Khi bạn hiểu rằng Chart.js giống như một "Bootstrap" cho canvas để vẽ biểu đồ nhanh chóng, bạn sẽ hiểu rõ hơn về nó là gì.
Chart.js giúp bạn tiết kiệm thời gian vì bạn không cần phải học API của canvas. Mã Chart.js là một mẫu đã được viết sẵn mà API của canvas có thể đọc và ngay lập tức vẽ biểu đồ mà bạn muốn. Công cụ tiết kiệm thời gian này giúp bạn tiến xa hơn. Nếu không có nó, bạn sẽ cần phải học cách viết mã Javascript mà API của canvas có thể đọc (hoặc "phân tích" theo thuật ngữ lập trình).
Vậy hãy quay lại câu hỏi: Chart.js là gì? Đây là cách tôi sẽ định nghĩa Chart.js:
"Chart.js là một mẫu biểu đồ đã được viết sẵn bằng JavaScript mà API của canvas có thể đọc."
www.Chartjs3.com
Định nghĩa này giúp bạn có một điểm khởi đầu tốt để làm việc. Bạn ngay lập tức hiểu rằng đó là Javascript nhưng cũng thấy sự kết nối vì sao nó khác một chút. Nó được viết để đọc được cho thẻ canvas. API của thẻ canvas được viết bằng Javascript nhưng mã có sự khác biệt nhỏ.
Nhiều người gặp khó khăn vì họ không thấy được mối quan hệ này và không thể thực sự hiểu Chart.js ở một mức độ sâu hơn. Không hiểu cách sử dụng API của thẻ canvas hoặc cách viết nó bằng Javascript không phải là điều tồi tệ. Điều này sẽ hạn chế các tùy chọn của bạn và giới hạn tính tương tác của biểu đồ của bạn. Hạn chế này là điều mà nhiều người trải qua như một trở ngại.
Tại sao bạn muốn sử dụng Chart.js và rào cản gặp phải
Trong số nhiều người muốn sử dụng Chart.js, họ tưởng tượng ra những biểu đồ thú vị có thể được nhấp vào và tương tác. Nơi dữ liệu được trích từ cơ sở dữ liệu hoặc đối tượng JSON và khi bạn nhấp vào một nút, nó sẽ biến thành một cái gì đó mới mẻ và sảng khoái. Nó nên nhiều hơn so với một biểu đồ phẳng tiêu chuẩn mà chúng ta thường thấy trong Ms. Excel. Thật đáng tiếc, khi họ nhận ra rằng cách sử dụng Chart.js đòi hỏi hiểu biết vững chắc về nhiều lĩnh vực (Javascript, Chart.js, API canvas, MySQL, PHP, Node JS và nhiều thứ khác), nó trở thành một chướng ngại thực sự để làm cho biểu đồ trở nên tương tác.
Làm thế nào để vượt qua chướng ngại với Chart.js?
Mục tiêu của cuốn sách này là giúp bạn vượt qua rào cản mà bạn gặp phải trong Chart.js. Tôi đã làm nhiều video và sau khi nhận thấy rằng các chủ đề video thường xem nhất liên quan đến Chart.js kèm theo tính tương tác, tôi quyết định viết một cuốn sách về điều đó.
Cuốn sách này được viết để giúp bạn đạt được điều đó. Đây là một cuốn sách video trực quan. Điều này có nghĩa là bạn sẽ học, nhưng tất cả các chủ đề cũng có định dạng video để giải thích và hiểu rõ tốt hơn. Nhiều lập trình viên có hướng tới hình ảnh, đó là lý do tại sao họ làm việc với các trang web và mã lập trình. Việc thấy nó hoạt động và hiểu về cách và tại sao lại rất quan trọng trong việc học Chart.js.
Tại sao tài liệu về Chart.js không bao gồm các chủ đề liên quan đến tính tương tác?
Có thể bạn đã đọc tài liệu về Chart.js và phát hiện rằng họ không đi sâu vào tính tương tác. Mục tiêu của tài liệu về Chart.js là giúp bạn học cách sử dụng Chart.js. Nói cách khác, điều này nằm ngoài phạm vi của họ. Bởi vì họ muốn giải thích cách vẽ biểu đồ. Họ không bàn về cách tạo tính tương tác vì nó được xem xét là mã Javascript, mã API canvas, MySQL hoặc những thứ khác không liên quan đến Chart.js. Họ đúng vậy và mong đợi bạn đến trang web của họ vì bạn muốn học cách vẽ biểu đồ trong Chart.js.
Chart.js được gọi là một JS Framework. Framework bao gồm hai từ, đó là "frame" và "work". Điều này có nghĩa là bạn làm việc trong một phạm vi hoặc khung cố định. Hãy xem nó như một khung hình, tương tự như một "biên" (hãy nghĩ đến CSS). Mọi thứ bên ngoài biên đó đều nằm ngoài phạm vi và không được bao gồm trong Chart.js.
Tại sao lại như vậy? Nếu bạn muốn học Chart.js với MySQL, họ mong đợi bạn tự tìm hiểu tài liệu về MySQL vì họ không ở đây để giảng dạy bạn về điều đó. Mặc dù chúng có ích khi kết hợp, Tài liệu về Chart.js tránh bao gồm để giữ cho tài liệu ngắn gọn. Nếu không, tài liệu sẽ trở nên to lớn và khó quản lý. Hãy nghĩ về tất cả các chủ đề mà họ cần bao gồm, đó là nhiều framework và ngôn ngữ lập trình khác nhau.
Tài liệu tương tác về Chart.js
Bạn đã có hiểu biết vững chắc về lý do tại sao Tài liệu hiện tại về Chart.js được viết như vậy. Bây giờ là thời gian để thêm một tầng phức tạp, đó là việc bao gồm các phần tương tác của Chart.js.
Để tạo ra một biểu đồ tương tác, bạn sẽ cần biết nhiều ngôn ngữ và chủ đề trong Javascript.
- Trường nhập HTML: Trường nhập là điểm khởi đầu của tính tương tác trên biểu đồ.
- Mảng JavaScript: Nếu không hiểu điều này, bạn sẽ không thể thao tác dữ liệu bằng bất kỳ cách nào hoặc định dạng nào.
- Hàm JavaScript: Hàm cần thiết để tạo một phản hồi sau khi một nút đã được nhấp hoặc một hiệu ứng hover đã được kích hoạt.
- API của Chart.js: Chart.js bao gồm một số chủ đề nâng cao giúp bạn xử lý các mục liên quan đến thẻ canvas.
- Cơ sở dữ liệu (MySQL, MongoDB, vv.): Đối với kết nối cơ sở dữ liệu, có nhiều tùy chọn khả dĩ. Nhiều người đang chuyển sang ngôn ngữ lập trình JS toàn diện. Nghĩa là cả phần giao diện và phần máy chủ đều sử dụng JS.
- Ngôn ngữ lập trình phía máy chủ (PHP, Node.js vv.): Đây là những "trung gian" quan trọng để "giao tiếp" giữa phía giao diện và phía máy chủ (cơ sở dữ liệu hoặc máy chủ).
Chúng ta sẽ bàn về những chủ đề này trong các chương tiếp theo.
Chương 1: Tạo một biểu đồ cố định trong Chart.js
Tạo một biểu đồ bằng Chart.js khá đơn giản. Tài liệu Chart.js có một đoạn mã minh họa tốt. Tuy nhiên, họ thường bỏ qua một số giải thích bổ sung. Phần quan trọng là các khối mã, đó là các đoạn mã được chia thành từng phần và kết nối một cách hợp lý. Họ có một ví dụ cũ xuất phát từ Chart.js 2 và tôi không khuyến nghị bạn sử dụng mã cụ thể đó. Hãy tìm hiểu phương pháp mới.
Những khối này thường được chia thành 3 phần riêng biệt, nhưng đôi khi có thể có nhiều hơn nếu biểu đồ có một số điều chỉnh tùy chỉnh. Những khối này có thể coi là cấu trúc cơ bản hoặc nền tảng của mã Chart.js. Trong các video, tôi thường gọi chúng là:
- Khối Thiết lập hoặc Dữ liệu
- Khối Cấu hình hoặc Cấu hình
- Khối Render hoặc Khởi tạo
Khối Thiết lập
Khối Thiết lập hoặc Dữ liệu bao gồm tất cả dữ liệu mặc định mà chúng ta sử dụng trong biểu đồ của mình. Tất cả từ nhãn, bộ dữ liệu, dữ liệu (điểm dữ liệu) và nhiều thứ khác.
Khối Cấu hình
Khối Cấu hình bao gồm tham chiếu đến khối dữ liệu, các tùy chọn và loại biểu đồ.
Khối Render
Khối Render hoặc Khởi tạo bắt đầu hoặc kích hoạt quá trình vẽ biểu đồ vào thẻ canvas mà nó đang tham chiếu.
Video về mã khung Chart.js
Video này hướng dẫn cách lấy mã ví dụ cũ từ tài liệu Chart.js và chuyển đổi nó thành phiên bản mới nhất, vì Chart.js đang dần chuyển đổi sang cấu trúc này.
Nếu bạn quan tâm đến việc lấy mã nguồn chính xác, bạn có thể tìm trang hoàn chỉnh với thêm giải thích trên trang cụ thể này.
Bao gồm cùng một video nhưng cũng có thông tin bổ sung về các khối và mã nguồn Chart.js.
Chương 2: Khám phá các khối Render, Cấu hình và Dữ liệu.
Trong khi khối Render đảm nhiệm việc vẽ biểu đồ. Điều này giải thích tại sao nó được gọi là khối Render hoặc khối Khởi tạo. Vì Khởi tạo sẽ đề cập đến bắt đầu, vì vậy nó bắt đầu vẽ biểu đồ từ đầu. Điều này trở nên quan trọng hơn khi bạn sử dụng chart.destroy API. Điều này quan trọng nếu bạn muốn chuyển đổi giữa các loại biểu đồ khác nhau khi nhấp vào một nút.
Các loại biểu đồ khác nhau trong khối Cấu hình
Chart.js 3 có nhiều loại biểu đồ khác nhau sẵn có. Như các loại biểu đồ sau.
- Biểu đồ cột
- Biểu đồ đường
- Biểu đồ tròn
- Biểu đồ hình bánh
- Biểu đồ phân tán
- Biểu đồ bong bóng
- Biểu đồ radar
- Biểu đồ khu vực cực
Ngoài các loại biểu đồ mặc định, còn có thêm các tùy chọn khác như biểu đồ kết hợp, nhưng đó chỉ là các tùy chọn cơ bản được tích hợp sẵn trong Chart.js. Tất nhiên, nếu bạn giống như hầu hết mọi người, bạn luôn muốn thử nghiệm với các biểu đồ phức tạp hơn, được tùy chỉnh nhiều hơn. Ví dụ, một biểu đồ histogram và nhiều hơn nữa, điều này phức tạp hơn một chút và chúng ta sẽ bàn về điều đó sau.
Tuy nhiên, việc thay đổi các loại biểu đồ cơ bản khá dễ dàng. Nhìn vào Chart.js, bạn chỉ cần điều chỉnh vào khối Cấu hình và chèn loại biểu đồ bạn muốn.
// config block
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
Ở đây, bạn có thể thấy mục màu nổi bật cần được điều chỉnh. Tuy nhiên, bạn cần phải làm gì nếu bạn muốn tạo một tầng tương tác?
Mặc dù các loại là một mục thú vị, nó khá đơn giản. Hầu hết các loại biểu đồ có nhiều điểm tương đồng nhưng một số khác nhau và có thể hoặc không có trục như biểu đồ hình bánh và biểu đồ doughnut. Hoặc chúng có cấu trúc khác như biểu đồ radar. Chúng tôi sẽ bàn thêm về điều này sau nhưng trước tiên hãy xem cách điều chỉnh dữ liệu.
Khối dữ liệu và tập dữ liệu
Phần quan trọng nhất, nơi mà hầu hết sự chú ý được tập trung nhiều nhất, liên quan đến tập dữ liệu. Tập dữ liệu là khối mã mà bao gồm việc vẽ các điểm dữ liệu. Mục tiêu của biểu đồ là truyền đạt một câu chuyện từ các con số thành một hình ảnh. Điều này làm cho các con số trở nên dễ tiêu thụ cho tâm trí.
Mặc dù việc cố định số là khá dễ dàng, nhưng làm cho chúng trở nên mềm hơn là một thách thức. Lý do chính là do việc thao tác mảng. Có khả năng thao tác dữ liệu mảng giúp bạn hiển thị chỉ các giá trị cần được hiển thị.
Nhiều người làm việc với Chart.js thường không thể hiện thực sự phần này. Lý do chính là họ nhìn vào Chart.js một cách khác. Thường, khi họ nhận ra rằng một phần lớn của Chart.js dựa trên các mảng, họ nhận ra rằng Chart.js thực sự là Javascript nhưng với một lượng lớn mã API canvas kèm theo.
Làm thế nào để bạn sửa đổi một mảng?
Thay đổi một mảng thường sử dụng 4 phương thức phổ biến nhất nhưng Javascript có một danh sách hoàn chỉnh các phương thức mảng cho bạn sử dụng. Nếu bạn muốn thực sự hiểu về điều này, hãy đảm bảo khám phá Dãy Mảng Chart.js. Nó bao gồm nhiều mục khác nhau.
Tuy nhiên, hiện tại việc cung cấp cho bạn 4 phương thức thông thường là một sự giới thiệu tốt về nó. Nếu bạn muốn thêm, hãy đảm bảo khám phá loạt video bao gồm 19 video khác nhau về thao tác mảng.
- Phương thức Push của Mảng, thêm giá trị vào cuối mảng.
- Phương thức Pop của Mảng, loại bỏ giá trị cuối cùng của mảng.
- Phương thức Unshift của Mảng, thêm giá trị vào đầu mảng
- Phương thức Shift của Mảng, loại bỏ giá trị đầu tiên của mảng
Với bốn phương thức cơ bản này của mảng, bạn có thể làm rất nhiều việc. Vậy làm thế nào để sử dụng chúng? Hãy xem một ví dụ ở đây.
const colors = ['red', 'blue', 'green'];
colors.push('yellow') // colors = ['red', 'blue', 'green', 'yellow'];
colors.pop() // colors = ['red', 'blue', 'green'];
colors.unshift('black') // colors = ['black', 'red', 'blue', 'green'];
colors.shift() // colors = ['red', 'blue', 'green'];
Như bạn có thể thấy, mỗi phương thức mảng thực hiện và cách thực hiện nó là chỉ cần gắn kết với mảng mục đó, trong trường hợp này là 'colors', và thêm phương thức mảng ở cuối. Nếu bạn thêm một giá trị như với push hoặc unshift, bạn cần xác định giá trị sẽ được thêm vào mảng.
Đó là cách dễ nhất để làm việc với mảng. Còn có một cách khác phức tạp hơn và mạnh mẽ hơn được gọi là cấu trúc dữ liệu trong Chart.js.
Cấu trúc dữ liệu - một cách tiên tiến để làm việc với tập dữ liệu
Cấu trúc dữ liệu là một trong những cách mạnh mẽ và tiên tiến nhất để thực hiện các công việc. Chart.js chỉ cung cấp một phần rất nhỏ cho mục này, điều đó là tiếc hổ vì cấu trúc dữ liệu có thể thực sự đơn giản hóa thao tác mảng. Theo bản chất, cấu trúc dữ liệu là các đối tượng JavaScript có thể được đọc trực tiếp trong biểu đồ của bạn.
Chart.js đã thực hiện điều này vì thường chúng ta nhận dữ liệu từ JSON hoặc trong một đối tượng và việc biến đổi đối tượng thành nhiều mảng sẽ không có ý nghĩa. Vì vậy, việc giảng dạy Chart.js đọc một cấu trúc hiện có sẽ tốt hơn nhiều. Điều này đã được giới thiệu một cách tốt trong Chart.js 3.1.
Để hiểu điều này, có nhiều video bao quát chủ đề này trên một trang riêng biệt. Đảm bảo xem tất cả các cấu trúc dữ liệu video.
Tuy nhiên, để đảm bảo bạn hiểu bản chất, video này sẽ giúp bạn có một hiểu biết cơ bản.
Các chủ đề nâng cao liên quan đến cấu trúc dữ liệu bạn có thể tìm thấy trên cấu trúc dữ liệu trang. Rất đề nghị!
Để sử dụng cấu trúc dữ liệu, chúng ta cần gán lại các giá trị x và y vì chúng ta cần chỉ cho Chart.js biết lấy điểm dữ liệu ở đâu thay vì trước đây. Để làm điều này, như bạn đã thấy trong video, chúng ta sử dụng phân tích cú pháp và xAxisKey và yAxisKey.
Phân tích cú pháp có nghĩa là làm cho một cái gì đó có thể đọc được cho ngôn ngữ mà chúng ta đang phân tích. Trong trường hợp này, chúng ta phân tích cú pháp đối tượng dữ liệu mới để làm cho nó có thể đọc được để vẽ biểu đồ bằng Chart.js.
Cấu trúc dữ liệu là một trong những điều tốt nhất trong Chart.js, nhưng nó không thực sự rõ ràng vì nó là điều bạn chỉ sẽ chú ý khi bạn cần làm việc với dữ liệu và biểu đồ thường xuyên. Bây giờ khi chúng ta đã hiểu về phần quan trọng nhất của dữ liệu, chúng ta nên tập trung vào chức năng.
Chức năng và tương tác của Chart.js
Sử dụng màu sắc trong Chart.js có thể rất hữu ích để làm nổi bật một điều gì đó. Các điểm dữ liệu được mã màu có thể truyền đạt thông tin mà không cần sử dụng từ ngữ. Ví dụ, khi chúng ta sử dụng màu đỏ cho giá trị âm và màu xanh cho giá trị dương, chúng ta đã truyền đạt mà không cần nói một lời nào. Dù người dùng có cảm nhận tự nhiên, họ có lẽ sẽ hiểu điều đó.
Các thiết lập màu nền và màu viền nằm trong khối dữ liệu bên trong bộ dữ liệu. Video ở đây điều khiển các tùy chọn mã màu cơ bản. Với màu xanh và màu đỏ tùy thuộc vào giá trị.
Rất may mắn là những tùy chọn này hiện chưa phức tạp vì chúng hoạt động với mảng. Khi bạn đã hiểu cách đưa giá trị vào một mảng, bạn có thể bắt đầu thử nghiệm với màu sắc một cách trực quan hơn. Như bạn có thể thấy, mỗi khi một kỹ năng mới được nắm vững, bạn có thể mở rộng tùy chọn trong Chart.js của mình.
Tất cả những điều bên dưới là các khái niệm cụ thể sẽ cần được sắp xếp lại thành các chương.
Hiểu sự khác biệt giữa Thời gian và Chuỗi Thời gian trong Chart JS
Trong Chart.js, chúng thường phải vẽ biểu đồ với các ngày cụ thể. Nếu bạn đang tạo một biểu đồ thị trường chứng khoán mà biểu đồ của bạn chỉ chứa dữ liệu cho các ngày trong tuần, bạn sẽ có dữ liệu bị thiếu hoặc cố định vào các ngày cuối tuần và ngày nghỉ lễ. Điều này có thể không mong muốn và bạn có thể muốn loại bỏ những ngày cụ thể đó để giữ cho biểu đồ sạch sẽ.
Biểu đồ Thời gian JS
Loại thời gian trong trường hợp này không hữu ích. Bởi vì nó sẽ tính toán khoảng cách dựa trên sự khác biệt về khung thời gian. Ví dụ, nếu điểm dữ liệu tiếp theo cách một tuần so với điểm dữ liệu hiện tại, nó sẽ tính toán 7 đoạn khoảng cách. Điều này tạo ra một khoảng lớn trong biểu đồ của chúng ta. Xem khoảng cách trong các biểu đồ x dưới đây.
Biểu đồ Chuỗi Thời gian Chart.js
Chart.js có một tính năng tích hợp tốt để giải quyết vấn đề cụ thể này, đó là chuỗi thời gian (timeseries). Trong đó, nó sẽ đặt mỗi ngày dựa trên khoảng cách đều đặn. Equidistant được xuất phát từ các từ 'equal' và 'distant'. Nói cách khác, nó sẽ đặt mỗi điểm dữ liệu tiếp theo cách nhau bằng nhau, bất kể khoảng thời gian giữa các năm. Xem hình ảnh dưới đây:
Tất nhiên, bằng cách làm như vậy, chúng ta sẽ cần sửa đổi cách thang đo hiển thị các ngày, vì nó có thể trùng lắp nếu có một lượng lớn dữ liệu nén trong một đoạn.
Cách Tạo Bảng Từ Bộ Dữ Liệu Trong Chart.JS
Tạo một bảng dựa trên dữ liệu từ Chart.js đòi hỏi sự hiểu biết cơ bản về JavaScript. Cụ thể, cách tạo các phần tử bảng và xây dựng một đối tượng bảng trong JS.
Với Chart.js, chúng ta có thể trích xuất đối tượng dữ liệu mà được tổ chức gọn gàng để vẽ biểu đồ. Phần dữ liệu đó cũng hữu ích để tạo bảng. Video bên dưới sẽ chỉ bạn cách thực hiện đúng như vậy.
Cách Tạo Biểu đồ Nhấp chữ trong Chart.JS
Tạo biểu đồ nhấp chữ trong Chart JS là có thể. Tuy nhiên, nó yêu cầu một số tùy chỉnh plugin tiên tiến để hoạt động. Điều chúng ta cần hiểu là cách vẽ các hình dạng tùy chỉnh để chuyển đổi các thanh thành một nhấp chữ.
Nếu bạn sẵn sàng cho một cấp độ cao hơn về Chart.js. Trong trường hợp đó, video này sẽ là một thách thức tuyệt vời. Nó sẽ theo dõi nhấp chữ bán hàng và từng bước trong nhấp chữ, nhấp chữ sẽ thu nhỏ dựa trên giá trị của bộ dữ liệu.
Cách Lưu Biểu đồ Dưới Dạng Hình ảnh trong Chart.JS
Để lưu và tải xuống một biểu đồ hoặc canvas dưới dạng hình ảnh, chúng ta sẽ cần thực hiện một số công việc. Theo mặc định, khi nhấp chuột phải, bạn có thể tải xuống và lưu biểu đồ dưới dạng hình ảnh. Tuy nhiên, điều này không hết sức rõ ràng đối với nhiều người, vì vậy tạo một nút tải xuống đặc biệt là một sự lựa chọn tuyệt vời.
Cách Tải Canvas Dưới Dạng Hình ảnh Khi Nhấp Vào Nút trong Chart.JS.
Video bên dưới sẽ chỉ bạn cách thực hiện chính xác điều này. Chúng ta sẽ chuyển đổi canvas thành một tệp PNG mà chúng ta có thể tải xuống và lưu trên thiết bị của chúng ta.
Khóa học Skillshare Sắp Ra Mắt!
Tôi đã làm việc trên một số khóa học Skillshare. Nếu bạn chưa có Skillshare và muốn khám phá các tùy chọn của họ. Bạn có thể nhận một tuần miễn phí Skillshare bằng cách nhấp vào liên kết dưới đây. Đây là một liên kết liên kết mà nếu bạn đăng ký, nó sẽ mang lại cho tôi một khoản hoa hồng, và nó sẽ không tốn cho bạn gì trong giai đoạn miễn phí này. Và khoản hoa hồng tôi nhận được sẽ được đầu tư lại vào các hướng dẫn và nghiên cứu phát triển Chart.js: