แสดงภาพข้อมูลอนุกรมเวลาด้วย μPlot Library

บล็อก

แสดงภาพข้อมูลอนุกรมเวลาด้วย μPlot Library

μPlot

ที่มีขนาดเล็ก ( <30 KB min ), เร็ว แผนภูมิสำหรับอนุกรมเวลา เส้น พื้นที่ ohlc & bar _(MIT Licensed)

แอพเงินสดที่ไม่มีแอพ

บทนำ

μPlot คือ a รวดเร็ว ประหยัดหน่วยความจำ ผ้าใบ 2D - แผนภูมิพื้นฐานสำหรับการวางแผน อนุกรมเวลา , เส้น, พื้นที่, ohlc & bar; จากการเริ่มต้นแบบเย็น มันสามารถสร้างแผนภูมิเชิงโต้ตอบที่มีจุดข้อมูล 150,000 จุดใน 135ms ปรับขนาดเชิงเส้นที่ ~ 25,000 pts/ms . นอกเหนือจากการเรนเดอร์เริ่มต้นที่รวดเร็วแล้ว ประสิทธิภาพการซูมและเคอร์เซอร์ยังดีที่สุดเมื่อเทียบกับ lib การสร้างแผนภูมิที่คล้ายคลึงกัน ที่<30 KB, it’s likely the smallest and fastest time series plotter that doesn’t make use of บริบทจำกัด WebGL shaders หรือ WASM ซึ่งทั้งสองอย่างนี้มีราคาการเริ่มต้นและขนาดโค้ดที่สูงกว่ามาก

อย่างไรก็ตาม หากคุณกำลังมองหาประสิทธิภาพ 60fps แบบเรียลไทม์พร้อมชุดข้อมูลขนาดใหญ่ uPlot สามารถพาคุณไปได้ไกลเท่านั้น . WebGL ควรเป็นเครื่องมือที่เหมาะสำหรับแอปพลิเคชัน เช่น สัญญาณเรียลไทม์หรือการแสดงข้อมูลรูปคลื่น: Try danchitnis / webgl-plot , huww98/TimeChart , epezent/implot .

uPlot Chart

คุณสมบัติ

ไม่ใช่คุณสมบัติ

เพื่อที่จะรักษาความเพรียวบาง รวดเร็ว และมีสมาธิ ฟีเจอร์ต่อไปนี้จะไม่ถูกเพิ่มเข้าไป:

  • ไม่มีการแยกวิเคราะห์ข้อมูล การรวม การรวม หรือการประมวลผลทางสถิติ เพียงแค่ทำล่วงหน้า เช่น. https://simplestatistics.org/ , https://www.papaparse.com/
  • ไม่มีทรานซิชั่นหรือแอนิเมชั่น สิ่งเหล่านี้เป็นการรบกวนอย่างแท้จริง
  • ไม่มีการหลีกเลี่ยงการชนกันสำหรับป้ายกำกับการทำเครื่องหมายแกน ดังนั้นอาจต้องมีการปรับแต่งเมตริกระยะห่างด้วยตนเอง หากการปรับแต่งป้ายกำกับเพิ่มความกว้างเริ่มต้นของป้ายกำกับอย่างมีนัยสำคัญ
  • เลขที่ ซีรีย์แบบเรียงซ้อน หรือ ปรับเส้นให้เรียบ . ดูลิงก์สำหรับวิธีที่การสื่อสารข้อมูลเหล่านี้แย่มาก แม้ว่าจะไม่เป็นส่วนหนึ่งของแกนหลัก แต่ API ของ uPlot ทำให้ง่ายต่อการใช้งานทั้งสองอย่าง: stacked-series , เส้นเรียบ .
  • ไม่มีการเลื่อน/เลื่อนแบบลากในตัว การรักษาประสิทธิภาพที่ดีด้วยชุดข้อมูลขนาดใหญ่จะต้องใช้โค้ดพิเศษจำนวนมาก & หลายรายการ |_+_| องค์ประกอบเพื่อหลีกเลี่ยงการวาดซ้ำและการปรับขนาดในแต่ละพิกเซลที่ลาก หากคุณมีจุดข้อมูลน้อยกว่าหมื่นจุด คุณสามารถใช้ API ของ uPlot เพื่อทำการซูมหรือแพนกล้องได้อย่างราบรื่น เช่น. ซูมวงล้อ , ซูม-สัมผัส . การแบ่งหน้าของข้อมูลยังทำงานได้ดี

เอกสาร (WIP)

ดูเหมือนว่าเอกสารจะเป็นงานที่ต่อเนื่องยาวนาน เริ่มกับ /docs/README.md สำหรับภาพรวมแนวคิด API แบบเต็มได้รับการจัดทำเป็นเอกสารเพิ่มเติมผ่านทางความคิดเห็นใน /dist/uPlot.d.ts . นอกจากนี้ คอลเล็กชัน runnable . ที่เพิ่มมากขึ้นเรื่อยๆ / สาธิต ครอบคลุม API ของ uPlot ส่วนใหญ่

ประสิทธิภาพ

เกณฑ์มาตรฐานที่ทำบน ThinkPad T480S:

  • วันที่: 2020-08-01
  • Windows 10 x64, Chrome 84.0.4147.105 (รุ่นอย่างเป็นทางการ) (64 บิต)
  • Core i5-8350U @ 1.70GHz, 8GB RAM
  • Intel HD 620 GPU, ความละเอียด 2560x1440

ประสิทธิภาพ uPlot

ขนาดเต็ม: https://leeoniya.github.io/uPlot/demos/multi-bars.html

ข้อมูลดิบ: https://github.com/leeoniya/uPlot/blob/master/bench/results.json

  • |_+_| รวม lib เองรวมถึงการพึ่งพาใด ๆ ที่จำเป็นในการแสดงเกณฑ์มาตรฐานเช่น ช่วงเวลา jQuery เป็นต้น
  • Flot ไม่ได้ทำให้เนื้อหาที่ย่อเล็กสุดพร้อมใช้งาน และตัวอย่างทั้งหมดใช้แหล่งที่มาที่ไม่บีบอัด พวกเขายังใช้ jQuery เวอร์ชันที่ไม่มีการบีบอัด:/

สิ่งที่ต้องทำ (ทั้งหมดเหล่านี้ใช้ SVG ดังนั้นประสิทธิภาพควรใกล้เคียงกับ Highcharts):

  • Chartist.js
  • d3-based
    • C3.js
    • dc.js
    • เมตริกกราฟิก
    • รถลาก

รับทราบ

ดาวน์โหลดรายละเอียด:

ผู้เขียน: leoniya

การสาธิต: https://leoniya.github.io/uPlot/bench/uPlot.html

รหัสแหล่งที่มา: https://github.com/leeoniya/uPlot

#javascript