เปิดตัว Apache ECharts 5.6

 (echarts.apache.org)
11 คะแนน โดย GN⁺ 2025-04-09 | 2 ความคิดเห็น | แชร์ทาง WhatsApp
  • ECharts เป็นไลบรารีการแสดงผลข้อมูลด้วย JavaScript แบบโอเพนซอร์สที่ปรับให้เหมาะกับทั้ง PC และมือถือ
  • รองรับเบราว์เซอร์สมัยใหม่ส่วนใหญ่ เช่น Internet Explorer 9/10/11, Chrome, Firefox, Safari เป็นต้น
  • ใช้ ZRender ซึ่งเป็นเอนจินเรนเดอร์กราฟิกของตัวเอง เพื่อมอบกราฟคุณภาพสูงที่เข้าใจง่ายและโต้ตอบได้

มีประเภทกราฟให้เลือกหลากหลาย

  • รองรับ line chart, bar chart, scatter plot, pie chart, candlestick chart, boxplot, map, heatmap, line chart สำหรับข้อมูลทิศทาง, relation graph, treemap, sunburst, parallel coordinates, funnel chart, gauge chart และอื่นๆ
  • สามารถผสานประเภทการแสดงผลหลายแบบเพื่อสร้างกราฟแบบผสมได้
  • รองรับ custom chart series โดยเพียงส่ง callback function renderItem ก็สามารถสร้างองค์ประกอบกราฟิกตามต้องการได้อย่างอิสระ
  • มีความสามารถด้านการโต้ตอบในตัว พร้อมใช้งานได้ทันทีโดยไม่ต้องตั้งค่าเพิ่มเติม

ฟีเจอร์ดาวน์โหลดแบบเลือกเฉพาะคอมโพเนนต์และแพ็กเกจขนาดเบา

  • แพ็กเกจพื้นฐานถูกปรับแต่งประสิทธิภาพมาอย่างมาก แต่ผู้ใช้สามารถเลือกเฉพาะประเภทกราฟและคอมโพเนนต์ที่ต้องการเพื่อสร้างแพ็กเกจขนาดเบาได้
  • สามารถดาวน์โหลด custom bundle ที่มีเฉพาะฟีเจอร์ที่ต้องการผ่าน online builder ได้

รองรับรูปแบบข้อมูลหลากหลาย

  • ตั้งแต่ v4.0 รองรับโครงสร้างข้อมูลหลายแบบผ่านพร็อพเพอร์ตี dataset เช่น อาร์เรย์สองมิติและอ็อบเจ็กต์แบบ key-value
  • สามารถแมปโครงสร้างข้อมูลได้อย่างเข้าใจง่ายด้วยพร็อพเพอร์ตี encode
  • ช่วยประหยัดเวลาในการเขียนอัลกอริทึมแปลงข้อมูลและลดการใช้หน่วยความจำให้น้อยที่สุด
  • สามารถแชร์ dataset เดียวกันระหว่างหลายคอมโพเนนต์ได้
  • รองรับ TypedArray เพื่อช่วยประหยัดหน่วยความจำและเพิ่มประสิทธิภาพ

ปรับแต่งให้เหมาะกับการแสดงผลข้อมูลขนาดใหญ่

  • มีเทคนิค incremental rendering สำหรับการแสดงผลจุดข้อมูลระดับหลายล้านจุด
  • ฟีเจอร์โต้ตอบอย่างการซูมและการเลื่อนก็ยังทำงานได้ลื่นไหลแม้กับข้อมูลขนาดใหญ่
  • รองรับการเรนเดอร์ข้อมูลสตรีมมิงผ่าน WebSocket
  • สามารถแสดงผลข้อมูลได้โดยไม่ต้องโหลดข้อมูลทั้งหมดพร้อมกัน

ปรับให้เหมาะกับมือถือ

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

รองรับวิธีเรนเดอร์และแพลตฟอร์มที่หลากหลาย

  • รองรับการเรนเดอร์หลายรูปแบบ เช่น Canvas, SVG (v4.0 ขึ้นไป), VML
  • VML ใช้เพื่อรองรับ IE รุ่นเก่า, SVG ใช้หน่วยความจำได้มีประสิทธิภาพบนมือถือ, ส่วน Canvas เหมาะกับงานข้อมูลขนาดใหญ่
  • ในสภาพแวดล้อม Node.js สามารถทำ server-side rendering (SSR) ได้ผ่าน node-canvas
  • ใช้งานได้บน WeChat MiniProgram ด้วย
  • ชุมชนยังได้พัฒนาส่วนขยายสำหรับภาษาอย่าง Python (pyecharts), R (echarty), Julia (ECharts.jl) เป็นต้น
  • ด้วยการรองรับหลายแพลตฟอร์มและหลายภาษา นักพัฒนาจึงโฟกัสกับงานด้านการแสดงผลข้อมูลได้เต็มที่

ฟีเจอร์สำรวจข้อมูลแบบโต้ตอบ

  • สามารถสำรวจจากข้อมูลภาพรวมไปสู่รายละเอียดได้ผ่านการซูม การแพน และการกรอง
  • มีคอมโพเนนต์สำหรับการโต้ตอบหลากหลาย เช่น legend, visualMap, dataZoom, tooltip, brush
  • ทำให้สามารถสำรวจข้อมูลได้หลายรูปแบบผ่านส่วนติดต่อผู้ใช้

เสริมความสามารถด้านการแสดงผลข้อมูลหลายมิติ

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

สะท้อนข้อมูลแบบเรียลไทม์

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

มีเอฟเฟกต์ภาพพิเศษให้ใช้งาน

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

การแสดงผล 3D บนพื้นฐาน WebGL

  • ECharts GL ใช้ WebGL เป็นพื้นฐาน และรองรับการแสดงผล 3D หลากหลาย เช่น ลูกโลก 3D อาคาร และฮิสโตแกรมประชากร
  • สามารถเพิ่มเอฟเฟกต์ภาพได้ด้วยการตั้งค่าที่เรียบง่าย
  • นำไปใช้กับ VR และจอขนาดใหญ่ได้ด้วย

รองรับการเข้าถึง

  • เป็นไปตามมาตรฐานการเข้าถึง WAI-ARIA ของ W3C
  • สามารถสร้างคำอธิบายอัตโนมัติสำหรับผู้พิการทางสายตาโดยอิงจากข้อมูลการตั้งค่ากราฟ
  • ทำให้เข้าถึงเนื้อหาการแสดงผลข้อมูลผ่านโปรแกรมอ่านหน้าจอได้

บทความที่เกี่ยวข้อง

2 ความคิดเห็น

 
jhk0530 2025-04-09

echart สวยและใช้ได้ดีครับ โดยส่วนตัวแล้วผมรู้สึกว่าใช้งานง่ายกว่า highcharts
 
GN⁺ 2025-04-09
ความเห็นจาก Hacker News

  • ระหว่างพัฒนา Briefer ได้ทดสอบไลบรารีด้านการทำภาพข้อมูลแทบทั้งหมดแล้ว และ Apache ECharts คืออันที่ดีที่สุด

    • ปัญหาหลักของไลบรารีอื่นคือ (a) ดีไซน์ไม่ค่อยดี (b) ใช้งานยาก (c) ขาดความยืดหยุ่น
    • Apache ECharts แก้ปัญหาเหล่านี้ได้
    • มันสวยงามตั้งแต่ค่าเริ่มต้น สามารถคำนวณ declarative spec จากฝั่งแบ็กเอนด์แล้วส่งไปยังฟรอนต์เอนด์ได้ และยืดหยุ่นพอที่จะรองรับทุกอย่างที่เครื่องมือ BI แบบดั้งเดิมทำได้
    • ทุกอย่างที่ต้องการมีมาให้แล้วโดยไม่ต้องเพิ่มฟีเจอร์ใหม่
    • ดีใจที่ได้เห็นงานยอดเยี่ยมนี้บน HN

  • ขอแนะนำ go-echarts ด้วย

    • สามารถประกาศกราฟด้วย Golang types ได้ และ JSON marshaler ของ Golang จะ bind ไปเป็น JSON โดยอัตโนมัติ
    • ใช้มาแล้วในหลายโปรเจกต์ และเมื่อมี issue หรือ PR ผู้ดูแลก็ตอบสนองรวดเร็ว
    • การ embed JavaScript function และ SQL query เข้าไปใน Go เป็นเรื่องที่สนุกดี
    • มีตัวอย่าง Golang ที่ดึงข้อมูลจาก DuckDB แล้วสร้างไฟล์กราฟแท่งเทียนพร้อม JavaScript tooltip

  • หลังจากลองไลบรารีอื่นมามากมาย ก็เลือก Apache ECharts เมื่อปีที่แล้ว และไม่เคยเสียใจเลย

    • เอกสารยอดเยี่ยม ประสิทธิภาพดี ปรับแต่งได้สูง ใช้งานง่าย และรองรับกราฟทุกประเภทที่ต้องการ

  • คิดว่า ECharts คือไลบรารีที่ดีที่สุด

    • แต่มักไม่ค่อยปรากฏในลิสต์หรือผลการค้นหาไลบรารีกราฟ
    • เคยลองทั้ง chart.js, google charts, amCharts, Highcharts และ ApexCharts มาแล้ว
    • ตอนนี้ใช้อยู่ในเครื่องมือ/ไลบรารีของเรา

  • ใช้ Apache ECharts ในผลิตภัณฑ์มาตั้งแต่ปี 2020

    • แนะนำอย่างยิ่ง เป็นไลบรารีที่ยอดเยี่ยม เอกสารก็ดีเยี่ยม และตลอด 5 ปีที่ผ่านมาไม่มีปัญหาเลย
    • อยากเห็นการปรับปรุงเรื่อง keyboard accessibility ticket

  • line race เจ๋งมาก

    • สามารถสับสวิตช์เพื่อเริ่มการแข่งขันได้
    • นอร์เวย์ทำได้ดีมาก

  • ถ้ากำลังมองหาไลบรารีกราฟสำหรับเว็บไคลเอนต์ ขอแนะนำ charts.css ด้วย

    • แนวคิดนั้นเรียบง่ายกว่าไลบรารีกราฟส่วนใหญ่มาก แต่ยังทำความสามารถแบบเดียวกันได้
    • ใช้งานร่วมกับ server-side rendering, htmx และอื่น ๆ ได้ง่ายมาก

  • พอเห็นการประกาศแพ็กเกจกราฟ JS ชื่อ ECharts ก็คิดว่าอีก 1 ปีคงเลิกบำรุงรักษา

    • แต่พอเห็นการประกาศแพ็กเกจกราฟ JS ชื่อ Apache ECharts ก็คิดว่าปีหน้ามันคงยังได้รับการดูแลต่อ

  • กำลังหาไลบรารีกราฟสำหรับ React/React Native และ Apache ECharts เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการทำภาพข้อมูลแบบข้ามแพลตฟอร์ม

    • ทั้ง react-echarts และ react-native-echarts ยังพัฒนาอย่างต่อเนื่อง
    • การอยู่ภายใต้ Apache เป็นข้อได้เปรียบมากต่อแนวโน้มการพัฒนาและการบำรุงรักษาในอนาคตของโปรเจกต์

  • ได้เพิ่ม ECharts เป็นไลบรารีกราฟสำหรับ AI และกำลังเปลี่ยนกราฟ GUI พื้นฐานไปใช้ ECharts

    • ก่อนเลือกได้ทำการทบทวนอย่างกว้างขวาง และเลือก ECharts เพราะมันยอดเยี่ยมและสวยมาก