Cách thêm biểu đồ vào ứng dụng React của bạn

Cách thêm biểu đồ vào ứng dụng React của bạn
Độc giả như bạn giúp hỗ trợ MUO. Khi bạn mua hàng bằng các liên kết trên trang web của chúng tôi, chúng tôi có thể kiếm được hoa hồng liên kết. Đọc thêm.

Biểu đồ cung cấp cho người dùng của bạn một cách thuận tiện, hấp dẫn để trực quan hóa dữ liệu. Chúng có thể làm cho dữ liệu dễ hiểu hơn và có thể làm cho ứng dụng của bạn tương tác hơn.





hdd bên ngoài không hiển thị windows 10

Có một số cách để tạo biểu đồ trong React, bao gồm sử dụng CSS cơ bản hoặc thư viện như React-Vis hoặc React Google Charts.



Cách tạo biểu đồ trong React bằng CSS

Tạo biểu đồ trong React bằng CSS cơ bản tương đối dễ dàng. Tất cả những gì bạn cần làm là tạo một phần tử div có chiều rộng và chiều cao, sau đó đặt màu nền thành màu mong muốn của biểu đồ. Ví dụ:





LÀM VIDEO TRONG NGÀY 
 import React from 'react'; 
 
const Chart = () => { 
 return ( 
  <div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}/> 
 ); 
} 
 
export default Chart;

Trong đoạn mã trên, chúng tôi đã nhập thư viện React. Sau đó, chúng tôi đã tạo một hàm có tên là Biểu đồ trả về một div có chiều rộng 100px, chiều cao 300px và màu nền là #5D6AFF. Điều này sẽ tạo ra một biểu đồ cơ bản với nền màu xanh lam. Bạn cũng có thể sử dụng giao diện người dùng vật liệu hoặc Tailwind CSS trong ứng dụng React của bạn để tạo biểu đồ.

Bạn cũng có thể tạo nhiều biểu đồ có văn bản hoặc hình ảnh bên trong các div để tạo các biểu đồ phức tạp hơn.



 import React from 'react'; 
 
const Chart = () => { 
 return ( 
  <div> 
   <div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}> 
    <p>Chart 1</p> 
   </div> 
   <div style={{width: '100px', height: '300px', backgroundColor: '#FFCF00'}}> 
    <img src="https://dummyimage.com/40x80/000/0011ff" style={{padding:'100px 30px'}} /> 
   </div> 
  </div> 
 ); 
} 
 
export default Chart;
Ứng dụng phản ứng với các biểu đồ bằng css

Biểu đồ phản ứng bằng thư viện React-Vis

React-Vis là một thư viện do Uber tạo ra cho phép bạn tạo biểu đồ và đồ thị trong React. Nó cung cấp một tập hợp các thành phần giúp dễ dàng tạo biểu đồ với các hình dạng, màu sắc và kích cỡ khác nhau. Nó cũng hỗ trợ hoạt ảnh và tính tương tác, có thể giúp làm cho biểu đồ của bạn hấp dẫn hơn.

Để sử dụng React-Vis, trước tiên bạn phải tạo một ứng dụng React cơ bản và cài đặt thư viện. Bạn có thể làm điều này với lệnh sau:



 npm install react-vis

Khi bạn đã cài đặt thư viện, bạn có thể tạo biểu đồ cơ bản bằng mã sau:

 import React, { useState } from 'react'; 
 
import { 
 XYPlot, 
 LineSeries, 
 VerticalGridLines, 
 HorizontalGridLines, 
 XAxis, 
 YAxis 
} from 'react-vis'; 
 
const Chart = () => { 
 const [data] = useState([ 
  { x: 0, y: 8 }, 
  { x: 1, y: 5 }, 
  { x: 2, y: 4 }, 
  { x: 3, y: 9 }, 
  { x: 4, y: 1 }, 
  { x: 5, y: 7 }, 
  { x: 6, y: 6 }, 
  { x: 7, y: 3 }, 
  { x: 8, y: 2 }, 
  { x: 9, y: 0 } 
 ]); 
 
 return ( 
  <XYPlot width={300} height={300}> 
   <VerticalGridLines /> 
   <HorizontalGridLines /> 
   <XAxis /> 
   <YAxis /> 
   <LineSeries data={data} /> 
  </XYPlot> 
 ); 
} 
 
export default Chart;

Đoạn mã trên nhập thư viện React và React-Vis. Sau đó, nó định nghĩa một hàm có tên là Biểu đồ trả về một XYPlot với VerticalGridLines, HorizontalGridLines, XAxis, YAxis và LineSeries. LineSeries lấy mảng dữ liệu chứa tọa độ x và y của các điểm tạo thành đường.



ứng dụng phản ứng với các biểu đồ bằng cách sử dụng phản ứng-viz

Sử dụng Thư viện biểu đồ phản ứng của Google

React Google Charts là một thư viện khác giúp dễ dàng tạo biểu đồ trong React. Nó cung cấp một tập hợp các thành phần để tạo các loại biểu đồ khác nhau, chẳng hạn như biểu đồ thanh, biểu đồ hình tròn và biểu đồ đường. Nó cũng hỗ trợ hoạt ảnh và tính tương tác, có thể giúp làm cho biểu đồ của bạn hấp dẫn hơn.

Để sử dụng React Google Charts, trước tiên bạn phải cài đặt thư viện. Bạn có thể làm điều này với lệnh sau:

 npm install react-google-charts

Khi bạn đã cài đặt thư viện, bạn có thể tạo biểu đồ cơ bản bằng mã sau:

 import React, { useState } from 'react'; 
import { Chart } from 'react-google-charts'; 
 
const MyChart = () => { 
 const [data] = useState([ 
  ['Year', 'Sales', 'Expenses'], 
  ['2013', 1000, 400], 
  ['2014', 1170, 460], 
  ['2015', 660, 1120], 
  ['2016', 1030, 540] 
 ]); 
 
 return ( 
  <Chart 
   width={'400px'} 
   height={'300px'} 
   chartType="Bar" 
   data={data} 
  /> 
 ); 
} 
 
export default MyChart;

Mã này nhập các thư viện biểu đồ phản ứng và biểu đồ phản ứng trên google. Sau đó, nó tạo một hàm gọi là MyChart, hàm này trả về một thành phần Biểu đồ. Thành phần Chart lấy mảng dữ liệu chứa các nhãn và giá trị của các điểm tạo nên biểu đồ.

phản ứng ứng dụng với các biểu đồ sử dụng google-reac-chart

Nhược điểm của việc sử dụng CSS

Có một số nhược điểm khi sử dụng CSS để tạo biểu đồ trong React:

  • Khó sử dụng : Nếu bạn muốn tạo các biểu đồ phức tạp, CSS có thể khó sử dụng.
  • Không linh hoạt lắm: CSS không linh hoạt lắm, vì vậy có thể khó thay đổi biểu đồ của bạn.
  • Không tương tác: Biểu đồ CSS không tương tác nên người dùng của bạn sẽ không thể tương tác với chúng.

Nếu bạn muốn tạo các biểu đồ phức tạp, React-vis và React-google-charts là những lựa chọn tốt hơn. Tuy nhiên, nếu bạn muốn tạo các biểu đồ đơn giản, CSS có thể là một lựa chọn tốt.

Lợi ích của việc sử dụng React-Vis

Có một số lợi ích khi sử dụng React-Vis để tạo biểu đồ trong React:

  • Dễ sử dụng: React-Vis rất dễ sử dụng, vì vậy bạn có thể dễ dàng tạo các biểu đồ phức tạp.
  • Tính linh hoạt cao: React-Vis rất linh hoạt, vì vậy bạn có thể dễ dàng thay đổi biểu đồ của mình.
  • tương tác: Biểu đồ React-Vis có tính tương tác, vì vậy người dùng của bạn có thể tương tác với chúng.
  • hoạt hình: Biểu đồ React-Vis hỗ trợ hoạt ảnh, vì vậy bạn có thể làm cho biểu đồ của mình hấp dẫn hơn.

Nếu bạn muốn tạo các biểu đồ phức tạp tương tác và sinh động, React-Vis là một lựa chọn tốt.

Lợi ích của việc sử dụng React Google Charts

Cũng giống như React-Vis, có một số lợi ích khi sử dụng React Google Charts để tạo biểu đồ trong React:

alcatel một màn hình cảm ứng không hoạt động
  • Dễ sử dụng: React Google Charts rất dễ sử dụng, vì vậy bạn có thể dễ dàng tạo các biểu đồ phức tạp.
  • Các loại biểu đồ khác nhau: React Google Charts cung cấp các loại biểu đồ khác nhau, vì vậy bạn có thể chọn loại biểu đồ tốt nhất cho dữ liệu của mình.
  • Hỗ trợ hoạt hình: React Google Charts hỗ trợ hoạt ảnh, vì vậy bạn có thể làm cho biểu đồ của mình hấp dẫn hơn.

Tăng mức độ tương tác của người dùng với biểu đồ

Biểu đồ là một cách tuyệt vời để trực quan hóa dữ liệu, nhưng bạn cũng có thể sử dụng chúng để tăng mức độ tương tác của người dùng. Việc thêm hoạt ảnh và tính tương tác vào biểu đồ của bạn có thể khiến chúng hấp dẫn hơn và có thể giúp người dùng hiểu dữ liệu của bạn tốt hơn.

Vì vậy, nếu bạn đang tìm cách tăng mức độ tương tác của người dùng trong ứng dụng React của mình, hãy xem xét thêm biểu đồ. Bạn cũng có thể triển khai ứng dụng React của mình lên một nền tảng nhanh, an toàn và có thể mở rộng như Github.