Sử dụng Chart.js với Vue.js
Nếu bạn không quen thuộc với Chart.js , bạn nên xem xét nó. Đó là một cách mạnh mẽ và đơn giản để tạo đồ thị rõ ràng với phần tử <canvas> HTML5. Đừng lo lắng, bạn không cần biết bất cứ điều gì về <canvas> để sử dụng Chart.js. Với đối tượng data() của Vue, thật dễ dàng lưu trữ dữ liệu của ta và thao tác với nó để thay đổi đồ thị của ta khi cần thiết.
Cài đặt Chart.js
Điều đầu tiên bạn muốn làm là tạo một ứng dụng Vue.js bằng cách sử dụng mẫu webpack-simple và cài đặt Chart.js.
$ vue init webpack-simple <project-name> $ cd <project-name> $ npm install $ npm install chart.js --save Điều hướng đến file App.vue của bạn và xóa tất cả mã đã tạo. <canvas> của biểu đồ sẽ nằm trong phần tử #app root . Tiếp theo, nhập Chart.js bằng ES6 vào thành phần Vue của bạn.
import Chart from 'chart.js'; Tạo biểu đồ
Biểu đồ này sẽ có hai bộ dữ liệu: Một) với số lượng mặt trăng trên mỗi hành tinh trong hệ mặt trời của ta và hai) với dung lượng tổng thể của mỗi hành tinh. Với hai bộ dữ liệu này, ta có thể có các loại biểu đồ khác nhau để hiển thị các mối tương quan trong dữ liệu.
Mọi biểu đồ Chart.js cần phải có <canvas> trong đánh dấu HTML. id của biểu đồ được sử dụng như một bộ chọn để liên kết JavaScript với nó.
<template> <div id="app"> <canvas id="planet-chart"></canvas> </div> </template> Cấu trúc của biểu đồ
Ở dạng đơn giản nhất, mỗi biểu đồ có cấu trúc cơ bản giống nhau:
const ctx = document.getElementById('planet-chart'); const myChart = new Chart(ctx, { type: '', data: [], options: {}, }); Bạn có thể bắt đầu bằng cách thêm dữ liệu của bạn vào đối tượng Chart này và tiếp tục lặp lại quy trình đó cho mỗi biểu đồ mới mà bạn muốn tạo. Tuy nhiên, quá trình này có thể dễ dàng hơn rất nhiều nếu ta có một hàm để truyền các đối số vào.
Bắt đầu bằng cách tạo một hàm mới trong đối tượng methods của thành phần và cung cấp cho nó hai tham số, chartId và chartData .
methods: { createChart(chartId, chartData) { const ctx = document.getElementById(chartId); const myChart = new Chart(ctx, { type: chartData.type, data: chartData.data, options: chartData.options, }); } } Chart.js có xu hướng có rất nhiều mã. Ví dụ: biểu đồ “hành tinh” đơn giản này có ít nhất hơn 50 dòng mã trong đó. Hãy tưởng tượng có nhiều biểu đồ với dữ liệu phức tạp.
Thành phần Vue file đơn của bạn có thể trở nên lớn và khó hiểu một cách nhanh chóng. Vì vậy, hãy sử dụng ES6 để import dữ liệu biểu đồ của ta , nhằm giữ cho thành phần Vue của ta mỏng và tập trung.
Tạo dữ liệu của biểu đồ
Tạo một file .js mới bên trong folder src . Đối với bài đăng này, nó được gọi là chart-data.js . Tuy nhiên, bạn có thể đặt tên này bất cứ thứ gì bạn thích. Tạo một const và đặt tên cho nó là planetChartData .
Lưu ý bạn cần đặt cho nó một cái tên duy nhất và mang tính mô tả dựa trên dữ liệu. Bạn có thể có một số đối tượng dữ liệu trong file này cho các biểu đồ khác nhau
export const planetChartData = { type: 'line', data: { labels: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'], datasets: [ { // one line graph label: 'Number of Moons', data: [0, 0, 1, 2, 67, 62, 27, 14], backgroundColor: [ 'rgba(54,73,93,.5)', // Blue 'rgba(54,73,93,.5)', 'rgba(54,73,93,.5)', 'rgba(54,73,93,.5)', 'rgba(54,73,93,.5)', 'rgba(54,73,93,.5)', 'rgba(54,73,93,.5)', 'rgba(54,73,93,.5)' ], borderColor: [ '#36495d', '#36495d', '#36495d', '#36495d', '#36495d', '#36495d', '#36495d', '#36495d', ], borderWidth: 3 }, { // another line graph label: 'Planet Mass (x1,000 km)', data: [4.8, 12.1, 12.7, 6.7, 139.8, 116.4, 50.7, 49.2], backgroundColor: [ 'rgba(71, 183,132,.5)', // Green ], borderColor: [ '#47b784', ], borderWidth: 3 } ] }, options: { responsive: true, lineTension: 1, scales: { yAxes: [{ ticks: { beginAtZero: true, padding: 25, } }] } } } export default planetChartData; Lưu ý: Bạn có thể tham khảo Chart.js' tài liệu hướng dẫn để biết thêm thông tin về bảng xếp hạng dòng, cũng như những người khác như bar , polarArea , radar , pie , và doughnut .
Bằng cách xuất planetChartData , bạn cho phép mà const được nhập khẩu vào một file JavaScript. Quan trọng hơn, bạn đang tách dữ liệu khỏi thành phần. Điều này giúp việc quản lý và tạo một biểu đồ mới với dữ liệu mới trong tương lai dễ dàng hơn nhiều .
Nhập dữ liệu của biểu đồ vào thành phần App.vue của bạn.
import planetChartData from './chart-data.js'; Tiếp theo, lưu trữ dữ liệu của biểu đồ đơn vào hàm data() của Vue.
data() { return { planetChartData: planetChartData, } } Lưu ý: Bạn cũng có thể sử dụng ngắn gọn ES6. Vì thuộc tính và giá trị dữ liệu có cùng tên nên bạn chỉ có thể sử dụng hành planetChartData thay vì hành planetChartData: planetChartData .
Khởi tạo biểu đồ
Đến đây, Chart.js sẽ được cài đặt và dữ liệu của biểu đồ sẽ được nhập vào thành phần App.vue . Trong đối tượng methods , bạn cũng đã tạo một hàm tạo đối tượng biểu đồ với dữ liệu từ file chart-data.js .
Bạn đã có một phần tử <canvas> được tạo trong mẫu của thành phần. Đến đây, đã đến lúc khởi tạo biểu đồ và ghi vào <canvas> .
Để làm như vậy, bạn cần chạy hàm createChart() trong phương thức vòng đời mounted() của thành phần. Hàm này có hai đối số; chartId (chuỗi) và chartData (đối tượng trong dữ liệu của ta từ chart-data.js ).
mounted() { this.createChart('planet-chart', this.planetChartData); } Biểu đồ sẽ hiển thị ngay bây giờ khi thành phần được mount !
Như bạn thấy, ta có thể tập trung vào dữ liệu của bạn và để Chart.js thực hiện công việc khó khăn.
Biểu đồ hỗn hợp
Chart.js cũng hỗ trợ các biểu đồ hỗn hợp. Tiếp tục với biểu đồ hành tinh bạn đã tạo ở trên, hãy hiển thị cùng một dữ liệu này với hai loại biểu đồ.
Mở file chart-data.js của bạn và hãy sửa đổi thuộc tính types của biểu đồ và datasets của ta . Tìm thuộc tính type của dữ liệu biểu đồ của bạn và thay đổi nó thành bar . Đến đây, cả hai biểu đồ sẽ là biểu đồ thanh . Tuy nhiên, ta muốn biểu đồ hiển thị một biểu đồ thanh và một biểu đồ đường.
Để thay đổi điều này, trong mỗi đối tượng dataset , hãy thêm một type tính type bên dưới thuộc tính label . Đối với đối tượng dataset đầu tiên, hãy cung cấp cho nó một type tính type với giá trị là line và đối với đối tượng thứ hai, hãy cung cấp cho nó một type tính type với giá trị là bar .
data: { type: 'bar', // was "line" labels: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'], datasets: [ { label: 'Number of Moons', type: 'line', // Add this data: [...], backgroundColor: [...], borderColor: [...], borderWidth: 3 }, { label: 'Planet Mass (x1,000 km)', type: 'bar', // Add this data: [...], backgroundColor: [...], borderColor: [...], borderWidth: 3 } ] } Sau khi mount thành phần của bạn, bạn sẽ thấy thông tin như sau:
Bài đăng này mới chỉ sơ lược về những gì bạn có thể làm với Chart.js. Bạn nên có hiểu biết cơ bản về cách sử dụng Chart.js với Vue bằng cách tách dữ liệu với các lần nhập ES6 .
Các tin liên quan
