การแสดงข้อมูลด้วย ApexCharts

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

เริ่มต้น

ขั้นแรก ติดตั้งส่วนประกอบ React-ApexCharts ในแอปพลิเคชัน React ของคุณและนำเข้า react-apexcharts

 npm i react-apexcharts apexcharts import ReactApexCharts from 'react-apexcharts'

องค์ประกอบหลักของ ApexChart คือออบเจ็กต์การกำหนดค่า ในออบเจ็กต์การกำหนดค่า เรากำหนดคุณสมบัติของ series ข้อมูลและ options สำหรับแผนภูมิ series ข้อมูลคือข้อมูลที่เราต้องการแสดงบนแผนภูมิ ในซีรีส์นี้ เรากำหนดข้อมูลและชื่อของข้อมูล ค่าในอาร์เรย์ข้อมูลจะถูกลงจุดบนแกน y ของแผนภูมิ ชื่อของข้อมูลจะปรากฏขึ้นเมื่อคุณวางเมาส์เหนือแผนภูมิ คุณสามารถมีชุดข้อมูลเดียวหรือหลายชุดก็ได้ ใน options เรากำหนดว่าเราต้องการให้แผนภูมิมีลักษณะอย่างไร คุณลักษณะและเครื่องมือที่เราต้องการเพิ่มลงในแผนภูมิและป้ายกำกับของแกน x และ y ของแผนภูมิ ข้อมูลที่เรากำหนดใน series ของออบเจกต์การกำหนดค่าและคุณสมบัติของ options คือสิ่งที่เราส่งต่อไปยัง series ส่วนประกอบ ReactApexChart และอุปกรณ์ประกอบฉาก options ตามลำดับ

นี่คือตัวอย่างว่าส่วนประกอบต่างๆ ของ ApexChart ทำงานร่วมกันอย่างไร (เราจะพิจารณาอย่างใกล้ชิดในบทความต่อไป)

 const config = { series: [1, 2, 3, 4, 5], options: { chart: { toolbar: { show: true }, } } } return ( <ReactApexChart options={config.options} series={config.series} type="polarArea" /> )

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

 const config = { series: [44, 55, 13, 43, 22], chart: { width: 380, type: 'pie' } },

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

แผนภูมิเส้น

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

แผนภูมินี้ประกอบด้วยองค์ประกอบต่อไปนี้:

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

เราได้เห็นรูปลักษณ์ของแผนภูมิเส้นและองค์ประกอบต่างๆ ของแผนภูมิแล้ว ตอนนี้ให้เราทำตามขั้นตอนของการสร้างหนึ่ง

เราเริ่มต้นด้วย series ที่นี่เรากำหนดข้อมูลของชุดข้อมูลและชื่อชุดข้อมูล จากนั้น เราส่ง options และ series ไปยังอุปกรณ์ประกอบฉากขององค์ประกอบ ReactApexChart นอกจากนี้เรายังกำหนดประเภทของแผนภูมิใน type เสาและตั้งค่าเป็น line

 const config = { series: [{ name: "Performance", data: [10, 21, 35, 41, 59, 62, 79, 81, 98] }], options: {} } return ( <ReactApexChart options={config.options} series={config.series} type="line" /> )

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

มากำหนดค่าตัวเลือกของแผนภูมิโดยเพิ่มค่าบางค่าให้กับออบเจกต์ options ที่เรามีในออบเจกต์ config

ในคุณสมบัติ chart ของอ็อบเจ็กต์ options เรากำหนดการกำหนดค่าของแผนภูมิ ที่นี่ เราเพิ่มแถบเครื่องมือจากแผนภูมิโดยตั้งค่าคุณสมบัติการ show true แถบเครื่องมือมีเครื่องมือในการควบคุมระดับการซูมของแผนภูมิและเพื่อส่งออกแผนภูมิในรูปแบบไฟล์ต่างๆ แถบเครื่องมือจะมองเห็นได้ตามค่าเริ่มต้น

 options: { chart: { toolbar: { show: true }, }, }

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

 dataLabels: { enabled: true },

ตามค่าเริ่มต้น เส้นของแผนภูมิเส้นจะเป็นเส้นตรง อย่างไรก็ตาม เราสามารถทำให้มันโค้งงอได้ เราเพิ่มคุณสมบัติ stroke ให้กับ options และตั้งค่าให้เป็น curve smooth

 stroke: { curve: "smooth" }

ส่วนสำคัญของแผนภูมิคือชื่อ เราเพิ่มคุณสมบัติ title ให้กับ options เพื่อให้ชื่อแผนภูมิ

 title: { text: 'A Line Chart', align: 'left' },

เราสามารถเพิ่มป้ายกำกับให้กับแกน x และ y ของแผนภูมิได้ เมื่อต้องการทำเช่นนี้ เราเพิ่มคุณสมบัติของ xaxis และ yaxis ให้กับ options และที่นั่น เรากำหนด title สำหรับแต่ละแกน

 xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], title: { text: 'Month' } }, yaxis: { title: { text: 'Performance' } }

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

 import ReactApexCharts from 'react-ApexCharts' const config = { series: [{ name: "Performance", data: [10, 21, 35, 41, 59, 62, 79, 81, 98] }], options: { chart: { toolbar: { show: true }, }, dataLabels: { enabled: true }, stroke: { curve: "smooth" } title: { text: 'A Line Chart', align: 'left' }, xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], title: { text: 'Month' } }, yaxis: { title: { text: 'Performance' } } } } return ( <ReactApexChart options={config.options} series={config.series} type="line" /> )

แผนภูมิพื้นที่

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

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

มาดูวิธีการสร้างแผนภูมิพื้นที่แบบเรียงซ้อนและวิธีเพิ่มป้ายชื่อข้อมูล

ในการสร้างแผนภูมิพื้นที่ เราตั้งค่าประเภทแผนภูมิเป็น area และเส้นขีดเป็นเส้น smooth นี่คือจังหวะเริ่มต้นสำหรับแผนภูมิพื้นที่

 const config = { options: { stroke: { curve: 'smooth' } } } return ( <ReactApexChart options={config.options} series={config.series} type="area" /> )

เพื่อให้เป็นแผนภูมิแบบเรียง stacked ในคุณสมบัติ chart ของอ็อบเจ็กต์ options เราตั้งค่า stack true

 const config = { options: { stroke: { curve: 'smooth' }, chart: { stacked: true } } return ( <ReactApexChart options={config.options} series={config.series} type="area" /> )

แผนภูมิแท่ง

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

แถบแนวนอนเป็นส่วนประกอบหลักของแผนภูมิแท่ง ช่วยให้เราสามารถเปรียบเทียบค่าของหมวดหมู่ต่างๆ ได้อย่างง่ายดาย

ในการสร้างแผนภูมิแท่ง เราเริ่มต้นด้วยการกำหนดข้อมูลชุดข้อมูลสำหรับแผนภูมิและตั้งค่า type ขององค์ประกอบ ReactApexChart เป็น bar

 const config = { series: [{ data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380] }], options: {} } return ( <ReactApexChart options={config.options} series={config.series} type="bar" /> )

มาเพิ่มชีวิตและความแตกต่างให้กับบาร์กันเถอะ ตามค่าเริ่มต้น แผนภูมิแท่งจะเป็นแนวตั้ง เพื่อให้เป็นแนวนอน เรากำหนดวิธีที่เราต้องการให้แท่งดูในคุณสมบัติ plotOptions เราตั้งค่าเสา horizontal true เพื่อทำให้แท่งแนวนอน เราตั้งค่าตำแหน่งของ dataLabels ไปที่ bottom เรายังสามารถตั้งค่าเป็น top หรือ center เสา distributed เพิ่มความแตกต่างให้กับบาร์ของเรา หากไม่มี สีจะไม่ถูกนำไปใช้กับแถบสี และคำอธิบายจะไม่แสดงที่ด้านล่างของแผนภูมิ เรายังกำหนดรูปร่างของแท่งแท่งโดยใช้คุณสมบัติ startingShape และ endingShape

 options{ plotOptions: { bar: { distributed: true, horizontal: true, startingShape: "flat", endingShape: "rounded", dataLabels: { position: 'bottom', }, } }, }

ต่อไป เราเพิ่มหมวดหมู่ ป้ายกำกับ และชื่อลงในแผนภูมิ

 xaxis: { categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'India'] }, title: { text: 'A bar Chart', align: 'center', },

แผนภูมิคอลัมน์

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

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

มาดูการสร้างแผนภูมิคอลัมน์พื้นฐานและดูว่าเราจะแปลงเป็นแผนภูมิคอลัมน์แบบเรียงซ้อนได้อย่างไร

เช่นเคย เราเริ่มต้นด้วยข้อมูล series ข้อมูลและตั้งค่า type แผนภูมิเป็น "แถบ"

 const config = { series: [{ name: 'Net Profit', data: [44, 55, 57, 56, 61, 58, 63, 60, 66] }, { name: 'Revenue', data: [76, 85, 101, 98, 87, 105, 91, 114, 94] }, { name: 'Free Cash Flow', data: [35, 41, 36, 26, 45, 48, 52, 53, 41] }], options: {} } return ( <ReactApexChart options={config.options} series={config.series} type="bar" /> )

นี่คือสิ่งที่เราได้รับจากกล่อง อย่างไรก็ตาม เราสามารถปรับแต่งมันได้ เรากำหนดความกว้างและรูปร่างของแท่งในคุณสมบัติ plotOptions นอกจากนี้เรายังกำหนดตำแหน่งของ dataLabel เป็น top

 options: { plotOptions: { bar: { columnWidth: '75%', endingShape: 'flat', dataLabels: { position: "top" }, }, }, }

ต่อไป เราจะกำหนดรูปแบบและขนาดตัวอักษรของป้ายข้อมูลและระยะห่างจากกราฟ สุดท้าย เราเพิ่มป้ายกำกับสำหรับแกน x และ y

 options: { dataLabels: { offsetY: -25, style: { fontSize: '12px', colors: ["#304758"] } }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], }, yaxis: { title: { text: '$ (thousands)' } }, }

หากต้องการแปลงเป็นแผนภูมิแบบเรียงซ้อน สิ่งที่เราต้องทำคือเพิ่มคุณสมบัติ stacked ใน chart และตั้งค่า true นอกจากนี้ เนื่องจากเราเปลี่ยนไปใช้แผนภูมิแบบเรียงซ้อน เราจะเปลี่ยน endingShape ของแท่งแท่งให้ flat เพื่อเอาเส้นโค้งออก

 options: { chart: { stacked: true, }, plotOptions: { bar: { endingShape: 'flat', } } }

แผนภูมิพายและโดนัท

แผนภูมิวงกลมเป็นกราฟวงกลมที่แสดงแต่ละหมวดหมู่เป็นชิ้นหรือเปอร์เซ็นต์ของทั้งหมด แผนภูมิโดนัทเป็นรูปแบบหนึ่งของแผนภูมิวงกลม โดยมีรูตรงกลาง และแสดงหมวดหมู่เป็นส่วนโค้งแทนที่จะเป็นส่วน ทั้งสองทำให้ความสัมพันธ์แบบ part-to-full ง่ายต่อการเข้าใจได้อย่างรวดเร็ว แผนภูมิวงกลมและแผนภูมิโดนัทมักใช้เพื่อแสดงภาพผลการเลือกตั้งและการสำรวจสำมะโน รายได้ตามผลิตภัณฑ์หรือแผนก ข้อมูลการรีไซเคิล การตอบแบบสำรวจ การแบ่งงบประมาณ สถิติการศึกษา แผนการใช้จ่าย หรือการแบ่งส่วนประชากร

ในแผนภูมิวงกลมและโดนัท series คำนวณเป็นเปอร์เซ็นต์ ซึ่งหมายความว่าผลรวมของค่าใน series ข้อมูลควรเป็น 100

เริ่มต้นด้วยการสร้างแผนภูมิวงกลม เราตั้งค่า type แผนภูมิเป็น pie เรายังกำหนด series ข้อมูลสำหรับแผนภูมิและกำหนดป้ายกำกับใน options ลำดับของป้ายกำกับสอดคล้องกับค่าในอาร์เรย์ series ข้อมูล

 const config = { series: [20, 10, 35, 12, 23], options: { labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'], } } return ( <ReactApexChart options={config.options} series={config.series} type="pie" /> )

เราสามารถควบคุมลักษณะการตอบสนองของแผนภูมิของเราได้ ในการดำเนินการนี้ เราได้เพิ่มคุณสมบัติที่ responsive ต่อ options ของแผนภูมิ ที่นี่เราตั้งค่าเบรกพอยต์ max-width เป็น 480px จากนั้น เรากำหนด width ของแผนภูมิเป็น 450px และ position ของคำอธิบายเป็น bottom ตอนนี้ ที่ขนาดหน้าจอ 480px หรือต่ำกว่า คำอธิบายจะปรากฏที่ด้านล่างของแผนภูมิ

 options: { labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'], responsive: [{ breakpoint: 480, options: { chart: { width: 450 }, legend: { position: 'bottom' } } }] },

ในการแปลงแผนภูมิวงกลมเป็นแผนภูมิโดนัท สิ่งที่คุณต้องทำคือเปลี่ยน type ของส่วนประกอบเป็น donut

 <ReactApexChart options={config.options} series={config.series} type="donut" />

ชาร์ตผสม

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

มาสร้างแผนภูมิเส้น พื้นที่ และคอลัมน์กัน

เรากำหนดข้อมูล series ข้อมูลและ type สำหรับแต่ละแผนภูมิ สำหรับแผนภูมิแบบผสม ประเภทของแผนภูมิแต่ละแผนภูมิจะถูกกำหนดใน series ข้อมูล และไม่อยู่ใน type ส่วนประกอบ ReactApexChart

 const config = { series: [{ name: 'TEAM A', type: 'column', data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30] }, { name: 'TEAM B', type: 'area', data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43] }, { name: 'TEAM C', type: 'line', data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39] }], options: {} }

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

สุดท้าย เราเพิ่มป้ายกำกับสำหรับแกน x และ y

 options: { stroke: { width: [2,2,4], curve: 'smooth' }, fill: { opacity: [0.7, 0.3, 1], }, labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov'], yaxis: { title: { text: 'Points', }, }, }

การปรับแต่งแผนภูมิของเรา

นอกเหนือจากการเปลี่ยนสีของแผนภูมิแล้ว เรายังเพิ่มระดับการปรับแต่งให้กับแผนภูมิได้อีกด้วย

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

 options: { grid: { row: { colors: ['#f3f3', 'transparent'], opacity: 0.5 }, column: { colors: ['#dddddd', 'transparent'], opacity: 0.5 }, }, }

เราสามารถปรับจังหวะของแผนภูมิและกำหนดสีได้ ลองทำกับแผนภูมิคอลัมน์กัน แต่ละสีในอาร์เรย์ colors จะสอดคล้องกับข้อมูลในอาร์เรย์ของ series ข้อมูล

 options: { stroke: { show: true, width: 4, colors: ['red', "blue", "green" ] }, }

บทสรุป

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