ไลบรารีแผนภูมิ JavaScript

ใครจะแนะนำห้องสมุดแผนภูมิ JavaScript เฉพาะ - เฉพาะที่ไม่ใช้แฟลชเลย?

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

โซลูชัน JavaScript มี 2 คลาสหลักสำหรับกราฟิกที่ไม่ต้องใช้ Flash:

• Canvas-based เรนเดอร์ใน IE โดยใช้ ExplorerCanvas ซึ่งจะขึ้นอยู่กับ VML
• SVG บนเบราว์เซอร์ที่ได้มาตรฐานแสดงผลเป็น VML ใน IE

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

สำหรับโซลูชัน SVG / VML มีตัวเลือกมากมายรวมถึง:

• การทำแผนภูมิ Dojoxดีถ้าคุณใช้ชุดเครื่องมือ Dojoแล้ว
• โซลูชั่นที่ใช้ราฟาเอล

Raphaelเป็นไลบรารีกราฟิกแบบโอเพ่นซอร์สที่ได้รับการดูแลรักษาเป็นอย่างดีและเป็นผู้ใหญ่พร้อมการสนับสนุนข้ามเบราว์เซอร์ที่ดีมากเช่น IE 6 ถึง 8, Firefox, Opera, Safari, Chrome และ Konqueror Raphael ไม่ได้ขึ้นอยู่กับเฟรมเวิร์ก JavaScript ใด ๆ ดังนั้นจึงสามารถใช้กับ Prototype, jQuery, Dojo, Mootools ฯลฯ ...

มีจำนวนแผนภูมิการสร้างแผนภูมิตาม Raphael รวมถึง (แต่ไม่ จำกัด เฉพาะ):

• gRaphaelส่วนขยายของไลบรารีกราฟิกของ Raphael
• Icoด้วย API ที่ใช้งานง่ายโดยอิงจากการเรียกใช้ฟังก์ชันเดียวเพื่อสร้างแผนภูมิที่ซับซ้อน

การเปิดเผยข้อมูล: ผมพัฒนาของหนึ่งในงา Ico บน GitHub

หากคุณกำลังใช้ jQuery ฉันได้พบFlotจะดีมาก - ลองตัวอย่างเพื่อดูว่าเขาเหมาะกับความต้องการของคุณ แต่ฉันได้พบว่าพวกเขาจะทำมากที่สุดของสิ่งที่ฉันต้องการสำหรับโครงการปัจจุบันของฉัน

นอกจากนี้ExtJS 4.0ยังได้แนะนำชุดของแผนภูมิที่ยอดเยี่ยม - มีประสิทธิภาพมากและถูกออกแบบมาเพื่อทำงานกับข้อมูลสด

ตรวจสอบhttp://www.highcharts.com !

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

อาจไม่ใช่สิ่งที่คุณกำลังมองหา แต่
Chart Chart ของ Googleนั้นค่อนข้างเท่ห์และใช้งานง่าย

มีอีกหนึ่งไลบรารีจาวาสคริปต์ที่ใช้ SVG มันถูกเรียกว่าProtovisและมาจาก Stanford Visualization Group

นอกจากนี้ยังช่วยในการสร้างกราฟิกเชิงโต้ตอบและการสร้างภาพข้อมูลที่ดี

http://vis.stanford.edu/protovis/ex/

แม้ว่ามันจะเป็นเพียงสำหรับเว็บเบราว์เซอร์ที่ทันสมัย

UPDATE:ทีม protovis ได้ย้ายไปที่ห้องสมุดอื่นที่เรียกว่า d3.js (Data Driven Documents) ตามที่พวกเขากล่าวว่า:

"ทีม Protovis กำลังพัฒนาไลบรารีการสร้างภาพข้อมูลใหม่ D3.js พร้อมการสนับสนุนการเคลื่อนไหวและการโต้ตอบที่ดีขึ้น D3 สร้างขึ้นบนแนวคิดหลายอย่างใน Protovis"

ห้องสมุดใหม่สามารถพบได้ใน:

http://mbostock.github.com/d3/

อัปเดต 2:

"Rickshaw" เป็นชุดเครื่องมือ JavaScript สำหรับสร้างกราฟอนุกรมเวลาแบบโต้ตอบ จาก d3.js ที่ทำให้การทำงานกับ d3.js ง่ายขึ้นแม้ว่าจะมีประสิทธิภาพน้อยกว่าเล็กน้อย

http://code.shutterstock.com/rickshaw/

เมื่อเร็ว ๆ นี้ฉันกำลังมองหาไลบรารีแผนภูมิ javascript และฉันประเมินกลุ่มทั้งหมดก่อนที่จะตกลงกับjqplotซึ่งตรงกับความต้องการของฉันเป็นอย่างดี ตามคำตอบของ Jean Vincent ที่กล่าวถึงคุณกำลังเลือกระหว่าง Canvas และ Svg based solution

ในใจของฉันข้อดีและข้อเสียที่สำคัญมีดังนี้ โซลูชันที่ใช้ SVG เช่นRaphael (และ offshoots) นั้นยอดเยี่ยมหากคุณต้องการสร้างแผนภูมิแบบไดนามิก / อินเทอร์แอคทีฟสูง หรือถ้าคุณต้องการสร้างแผนภูมินั้นเกินกว่ามาตรฐาน (เช่นคุณต้องการสร้างแผนภูมิไฮบริดบางประเภทหรือคุณได้สร้างภาพข้อมูลใหม่ที่ไม่มีใครนึกถึงมาก่อน) ข้อเสียคือช่วงการเรียนรู้และจำนวนของรหัสที่คุณจะต้องเขียน คุณจะไม่ต้องพุ่งออกจากชาร์ตในอีกไม่กี่นาทีเตรียมพร้อมที่จะลงทุนเวลาเรียนรู้จริงแล้วเขียนโค้ดจำนวนมากเพื่อสร้างแผนภูมิที่ค่อนข้างง่าย

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

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

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

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

เนื่องจากคำตอบบางอย่างล่าช้าลอง d3.js
http://mbostock.github.com/d3/

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

Flotrเป็นอีกหนึ่งไลบรารี Javascript ล้วนที่มีพื้นฐานมาจาก Prototype และได้รับแรงบันดาลใจจากFlot

ลองPlotKit

ฉันขอแนะนำgRaphaëlสำหรับการสร้างแผนภูมิ JavaScript อย่างแท้จริงพร้อมกับไลบรารีกราฟิกแบบเวกเตอร์ JavaScript อันบริสุทธิ์ที่สร้างขึ้นบน ( Raphaël )

ปัจจุบันgRaphaëlรองรับ Firefox 3.0+, Safari 3.0+, Opera 9.5+ และ Internet Explorer 6.0+

• กรอบ: http://www.simile-widgets.org/

พื้นฐาน: http://www.filamentgroup.com/examples/charting_v2/index_2.php

ดูดี: http://www.highcharts.com/

อีกอย่างคือ RGraph: แผนภูมิ Javascript และกราฟไลบรารี:

http://www.rgraph.net

Canvas ใช้ดังนั้นจึงรวดเร็วและมีแผนภูมิที่แตกต่างกันประมาณ 20 ชนิด ฟรีสำหรับการใช้ที่ไม่ใช่เชิงพาณิชย์เช่นกัน!

ที่ชื่นชอบ (ลอย) ได้รับการกล่าวถึงแล้ว

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

มีกิจกรรมมากมายในไลบรารีการสร้างแผนภูมิ dojo และสิ่งที่ดีมากที่ฉันใช้ในแอปพลิเคชัน AIR โดยไม่มีปัญหาก็ยอดเยี่ยม! ดูตัวอย่างได้ที่นั่นhttp://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/

ลองใช้ Google Visualization APIซึ่งเป็นลักษณะทั่วไปของAPI แผนภูมิที่ง่ายกว่า

http://code.google.com/apis/visualization/documentation/gallery.html

มีตัวเลือกการโต้ตอบที่ยอดเยี่ยมมากรวมถึงแผนที่มาตรวัดและแผนภูมิ

เราเพิ่งซื้อลิขสิทธิ์TechOctave Charts Suiteสำหรับการเริ่มต้นใหม่ของเรา ฉันขอแนะนำพวกเขา การออกใบอนุญาตนั้นง่ายมาก แผนภูมิดูดีมาก! มันง่ายในการเริ่มต้นและมี API ที่ทรงพลังเมื่อเราต้องการ ฉันตกตะลึงว่ารหัสนั้นสะอาดและสามารถขยายได้อย่างไร มีความสุขมากกับการเลือกของเรา

ลองใช้เส้นเวลาของ MIT ที่คล้ายกันซึ่งสามารถทำเป็นแผนภูมิได้ - http://simile.mit.edu/timeline/

หรือสุดท้ายhttp://code.google.com/p/gchart/

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

ลองดูที่บลัฟฟ์ มันเป็นพอร์ต JavaScript ของไลบรารีกราฟของ Gruff สำหรับ Ruby

Protochart เป็นสิ่งที่คุณต้องการ

Sencha ซื้อ Raphael และตอนนี้ชาร์ตของพวกเขาเป็นจาวาสคริปต์ล้วนๆจากเวอร์ชัน 4 Emprise และ HighCharts ที่กล่าวถึงข้างต้นเป็นรายการโปรดสองรายการของฉัน

http://www.sencha.com/

สำหรับแผนภูมิที่ผิดปกติมากขึ้น: http://thejit.org/

ฉันสามารถขอแนะนำArcadiaCharts ห้องสมุดสร้างแผนภูมิระดับมืออาชีพใหม่สำหรับ JavaScript และ GWT ทำงานในเบราว์เซอร์ทั้งหมดโดยไม่มีปลั๊กอิน ใช้งานง่ายและรวดเร็ว: สร้างแผนภูมิที่ดูดีด้วยรหัสเพียงไม่กี่บรรทัด ฟรีสำหรับการใช้ที่ไม่ใช่เชิงพาณิชย์

ชาร์ตฟิวชั่นมีห้องสมุด javascript / jquery ใหม่ที่ดูมีแนวโน้ม

ในกรณีที่คุณต้องการคือแผนภูมิแท่งเท่านั้น ฉันเผยแพร่รหัสบางอย่างที่ฉันใช้ในโครงการเก่า มีคนบอกฉันว่าการติดตั้ง VML นั้นใช้งานไม่ได้กับ IE เวอร์ชันล่าสุด แต่ SVG ควรใช้งานได้ดี อาจจะกลับไปที่โครงการและปล่อย renderers ฝั่งเซิร์ฟเวอร์บางอย่างที่ฉันมีอยู่แล้วและอาจเป็นเลเยอร์การแสดงผล WebGL มีลิงค์: http://blog.conquex.com/?p=64

อาจไม่ใช่สิ่งที่ OP ต้องการ แต่เนื่องจากคำถามนี้กลายเป็นรายการของตัวเลือกไลบรารีแผนภูมิ JS: jQuery Sparklinesเจ๋งจริงๆ

ตรวจสอบZingChart ผ้าใบ HTML5, SVG, VML และ Flash ชาร์ต ห้องสมุดที่ทรงพลังและเข้ากันได้ดีมาก ฉันอยู่ในทีม Zing - พูดถึงเราที่ twitter @zingchartหรือยิงคำถามใด ๆ ไปที่ support@zingchart.com