วิธีเพิ่มแผนภูมิในแอป React ของคุณ

ผู้อ่านเช่นคุณช่วยสนับสนุน MUO เมื่อคุณทำการซื้อโดยใช้ลิงก์บนเว็บไซต์ของเรา เราอาจได้รับค่าคอมมิชชั่นจากพันธมิตร อ่านเพิ่มเติม.

แผนภูมิช่วยให้ผู้ใช้ของคุณมีวิธีการแสดงข้อมูลที่สะดวกและน่าสนใจ พวกเขาสามารถเข้าใจข้อมูลได้ง่ายขึ้นและทำให้แอปของคุณมีการโต้ตอบมากขึ้น

มีหลายวิธีในการสร้างแผนภูมิใน React รวมถึงการใช้ CSS พื้นฐานหรือไลบรารี เช่น React-Vis หรือ React Google Charts

---

---

วิธีสร้างแผนภูมิในการตอบสนองด้วย CSS

การสร้างแผนภูมิใน React โดยใช้ CSS พื้นฐานนั้นค่อนข้างง่าย สิ่งที่คุณต้องทำคือสร้างองค์ประกอบ div ที่มีความกว้างและความสูง จากนั้นกำหนดสีพื้นหลังให้เป็นสีที่ต้องการของแผนภูมิ ตัวอย่างเช่น:

สร้างวิดีโอประจำวัน

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

ในโค้ดข้างต้น เราได้นำเข้าไลบรารี React จากนั้นเราได้สร้างฟังก์ชันชื่อแผนภูมิซึ่งส่งคืน div ที่มีความกว้าง 100px ความสูง 300px และสีพื้นหลัง #5D6AFF สิ่งนี้จะสร้างแผนภูมิพื้นฐานที่มีพื้นหลังสีน้ำเงิน นอกจากนี้คุณยังสามารถ ใช้ UI วัสดุ หรือ Tailwind CSS ในแอป React ของคุณ เพื่อสร้างแผนภูมิ

คุณยังสามารถสร้างหลายแผนภูมิที่มีข้อความหรือรูปภาพภายใน divs เพื่อสร้างแผนภูมิที่ซับซ้อนมากขึ้น

 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;

แผนภูมิแสดงปฏิกิริยาโดยใช้ไลบรารี React-Vis

React-Vis เป็นไลบรารีที่สร้างโดย Uber ซึ่งช่วยให้คุณสร้างแผนภูมิและกราฟใน React มีชุดส่วนประกอบที่ช่วยให้สร้างแผนภูมิที่มีรูปร่าง สี และขนาดต่างๆ ได้ง่าย นอกจากนี้ยังรองรับภาพเคลื่อนไหวและการโต้ตอบ ซึ่งช่วยให้แผนภูมิของคุณน่าสนใจยิ่งขึ้น

หากต้องการใช้ React-Vis คุณต้องทำก่อน สร้างแอป React พื้นฐาน และติดตั้งไลบรารี คุณสามารถทำได้โดยใช้คำสั่งต่อไปนี้:

---

---

 npm install react-vis

เมื่อคุณติดตั้งไลบรารีแล้ว คุณสามารถสร้างแผนภูมิพื้นฐานโดยใช้รหัสต่อไปนี้:

ทำไมคอนโทรลเลอร์ ps4 ของฉันถึงไม่ทำงาน

 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;

รหัสด้านบนนำเข้าไลบรารี React และ React-Vis จากนั้นจะกำหนดฟังก์ชันที่เรียกว่าแผนภูมิซึ่งส่งคืน XYPlot ที่มี VerticalGridLines, HorizontalGridLines, XAxis, YAxis และ LineSeries LineSeries ใช้อาร์เรย์ข้อมูลซึ่งมีพิกัด x และ y ของจุดที่ประกอบกันเป็นเส้น

---

---

การใช้ React Google Charts Library

React Google Charts เป็นอีกหนึ่งไลบรารีที่ทำให้การสร้างแผนภูมิใน React เป็นเรื่องง่าย โดยมีชุดส่วนประกอบสำหรับสร้างแผนภูมิประเภทต่างๆ เช่น แผนภูมิแท่ง แผนภูมิวงกลม และกราฟเส้น นอกจากนี้ยังรองรับภาพเคลื่อนไหวและการโต้ตอบ ซึ่งช่วยให้แผนภูมิของคุณน่าสนใจยิ่งขึ้น

หากต้องการใช้ React Google Charts คุณต้องติดตั้งไลบรารีก่อน คุณสามารถทำได้โดยใช้คำสั่งต่อไปนี้:

 npm install react-google-charts

เมื่อคุณติดตั้งไลบรารีแล้ว คุณสามารถสร้างแผนภูมิพื้นฐานโดยใช้รหัสต่อไปนี้:

 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;

รหัสนี้นำเข้าไลบรารี react และ react-google-charts จากนั้นจึงสร้างฟังก์ชันชื่อ MyChart ซึ่งส่งคืนส่วนประกอบแผนภูมิ ส่วนประกอบแผนภูมิใช้อาร์เรย์ข้อมูล ซึ่งมีป้ายกำกับและค่าของจุดที่ประกอบกันเป็นแผนภูมิ

ข้อเสียของการใช้ CSS

มีข้อเสียบางประการของการใช้ CSS เพื่อสร้างแผนภูมิใน React:

• ใช้งานยาก : หากคุณต้องการสร้างแผนภูมิที่ซับซ้อน CSS อาจใช้งานได้ยาก
• ไม่ยืดหยุ่นมาก: CSS ไม่ยืดหยุ่นมาก ดังนั้นจึงอาจทำการเปลี่ยนแปลงแผนภูมิได้ยาก
• ไม่โต้ตอบ: แผนภูมิ CSS ไม่โต้ตอบ ดังนั้นผู้ใช้ของคุณจะไม่สามารถโต้ตอบกับพวกเขาได้

หากคุณต้องการสร้างแผนภูมิที่ซับซ้อน React-vis และ React-google-charts เป็นตัวเลือกที่ดีกว่า อย่างไรก็ตาม หากคุณต้องการสร้างแผนภูมิอย่างง่าย CSS อาจเป็นตัวเลือกที่ดี

ประโยชน์ของการใช้ React-Vis

มีประโยชน์หลายประการในการใช้ React-Vis เพื่อสร้างแผนภูมิใน React:

• ง่ายต่อการใช้: React-Vis ใช้งานง่าย คุณจึงสร้างแผนภูมิที่ซับซ้อนได้อย่างง่ายดาย
• มีความยืดหยุ่นสูง: React-Vis มีความยืดหยุ่นสูง ดังนั้นคุณจึงสามารถเปลี่ยนแปลงแผนภูมิของคุณได้อย่างง่ายดาย
• เชิงโต้ตอบ: แผนภูมิ React-Vis เป็นแบบโต้ตอบ ดังนั้นผู้ใช้ของคุณสามารถโต้ตอบกับพวกเขาได้
• เคลื่อนไหว: แผนภูมิ React-Vis รองรับภาพเคลื่อนไหว คุณจึงสามารถทำให้แผนภูมิของคุณน่าสนใจยิ่งขึ้น

หากคุณต้องการสร้างแผนภูมิที่ซับซ้อนแบบโต้ตอบและเคลื่อนไหวได้ React-Vis เป็นตัวเลือกที่ดี

ประโยชน์ของการใช้ React Google Charts

เช่นเดียวกับ React-Vis มีประโยชน์หลายประการในการใช้ React Google Charts เพื่อสร้างแผนภูมิใน React:

• ง่ายต่อการใช้: React Google Charts ใช้งานง่าย คุณจึงสร้างแผนภูมิที่ซับซ้อนได้อย่างง่ายดาย
• แผนภูมิประเภทต่างๆ: React Google Charts มีแผนภูมิหลายประเภท ดังนั้นคุณจึงสามารถเลือกประเภทที่ดีที่สุดสำหรับข้อมูลของคุณได้
• รองรับแอนิเมชั่น: React Google Charts รองรับแอนิเมชั่น คุณจึงสามารถทำให้แผนภูมิของคุณน่าสนใจยิ่งขึ้น

เพิ่มการมีส่วนร่วมของผู้ใช้ด้วยแผนภูมิ

แผนภูมิเป็นวิธีที่ดีในการแสดงข้อมูลเป็นภาพ แต่คุณยังสามารถใช้เพื่อเพิ่มการมีส่วนร่วมของผู้ใช้ได้อีกด้วย การเพิ่มแอนิเมชั่นและการโต้ตอบให้กับแผนภูมิของคุณสามารถทำให้มีส่วนร่วมมากขึ้น และช่วยให้ผู้ใช้ของคุณเข้าใจข้อมูลของคุณได้ดีขึ้น

ดังนั้น หากคุณกำลังมองหาวิธีเพิ่มการมีส่วนร่วมของผู้ใช้ในแอป React ให้พิจารณาเพิ่มแผนภูมิ คุณยังสามารถปรับใช้แอป React ของคุณกับแพลตฟอร์มที่รวดเร็ว ปลอดภัย และปรับขนาดได้ เช่น Github