แผนภูมิวงกลมด้วย jQuery


93

ฉันต้องการสร้างแผนภูมิวงกลมใน JavaScript ในการค้นหาฉันพบ Google Charts API เนื่องจากเรามีการใช้ jQuery ผมพบว่ามีการรวม jQuery สำหรับ Google แผนภูมิใช้ได้

แต่ปัญหาของฉันคือข้อมูลจริงถูกส่งไปยังเซิร์ฟเวอร์ของ Google เพื่อสร้างแผนภูมิ มีวิธีป้องกันไม่ให้ส่งข้อมูลไปยัง Google หรือไม่? ฉันกังวลเกี่ยวกับการส่งข้อมูลของฉันไปยังบุคคลที่สาม

คำตอบ:


48

jqPlotดูดีทีเดียวและเป็นโอเพ่นซอร์ส

นี่คือลิงค์ไปยังตัวอย่าง jqPlot ที่น่าประทับใจและทันสมัยที่สุด


หมายเหตุ: ในเวอร์ชันส่วนใหญ่ (ล่าสุดในขณะนี้) จะใช้การอ้างอิง $ นอกการประกาศ (function ($) .. ) ดังนั้นจึงอาจขัดแย้งกับต้นแบบหรืออย่างอื่น
Mario Peshev

99

Flot

ข้อ จำกัด : เส้นจุดพื้นที่เติมแท่งวงกลมและการรวมกันของสิ่งเหล่านี้

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

Flot เวอร์ชันลำตัวรองรับแผนภูมิวงกลม

ความสามารถของ Flot Zoom

นอกจากนี้คุณยังสามารถเลือกส่วนของกราฟเพื่อรับข้อมูลกลับสำหรับ "โซน" ที่ต้องการได้อีกด้วย ในฐานะคุณสมบัติรองของ "การแบ่งเขต" นี้คุณยังสามารถเลือกพื้นที่บนกราฟและซูมเข้าเพื่อดูจุดข้อมูลให้ใกล้ขึ้นอีกเล็กน้อย เจ๋งมาก .


ประกายไฟ

ข้อ จำกัด : พายเส้นบาร์ชุดค่าผสม

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


แผนภูมิแบบสอบถาม 0.21

ข้อ จำกัด : พื้นที่เส้นบาร์และการรวมกันของสิ่งเหล่านี้

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

การเพิ่มค่าลงในแผนภูมินั้นค่อนข้างง่าย:

.chartAdd({

    "label"  : "Leads",
    "type"   : "Line",
    "color"  : "#008800",
    "values" : ["100","124","222","44","123","23","99"]
});

jQchart

ข้อ จำกัด : Bar, Line

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


TufteGraph

ข้อ จำกัด : บาร์และบาร์แบบเรียงซ้อน

Tuftegraph ขายตัวเองเป็น "กราฟแท่งสวย ๆ ที่คุณจะแสดงให้แม่เห็น" ใกล้เข้ามาแล้ว Flot สวยกว่า แต่ Tufte ให้ยืมตัวเองให้มีน้ำหนักเบามาก แม้ว่าจะมีข้อ จำกัด ดังกล่าว แต่ก็มีตัวเลือกให้เลือกน้อยดังนั้นคุณจะได้รับสิ่งที่คุณได้รับ ลองดูกราฟแท่งชนะอย่างรวดเร็ว


ขอบคุณสำหรับคำตอบ. ฉันกำลังตรวจสอบ jqPlot ตอนนี้ดูเหมือนว่าจะแก้ปัญหาของฉันได้ แต่ยังคงมีปัญหาอยู่ 1 รายการฉันต้องการให้คำอธิบายแผนภูมิปรากฏในแผนภูมิมากกว่าด้านนอก
Arun P Johny

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

2
Chiming ที่นี่ในฐานะคนที่ใช้ Flot และพบว่ามันเป็น lib ที่ดี
Brighid McDonnell

grr ฉันลอง flot แต่ทิ้งมันไปเพราะฉันไม่สามารถปรับแต่งป้ายแกนได้
ChiliNUT

Sorantis ลิงค์ไปยัง Query Chart 0.21 ตายแล้ว
jawo

5

คำแนะนำดีๆมากมายที่นี่เพียงแค่โยนZingChartลงในกองเพื่อการวัดที่ดี เราเพิ่งเปิดตัวjQuery wrapperสำหรับไลบรารีที่ช่วยให้สร้างและปรับแต่งแผนภูมิได้ง่ายยิ่งขึ้น ลิงค์ CDN อยู่ในการสาธิตด้านล่าง

ฉันอยู่ในทีม ZingChart และเราพร้อมที่จะตอบคำถามที่คุณอาจมี!


4

อีกสองสามรายการที่ไม่ได้กล่าวถึง:

สำหรับมินิพายเส้นและบาร์Peityนั้นยอดเยี่ยมเรียบง่ายเล็กเร็วใช้มาร์กอัปที่หรูหราจริงๆ

ฉันไม่แน่ใจว่าเป็นความสัมพันธ์กับ Flot (ตามชื่อ) แต่Flotr2ค่อนข้างดีแน่นอนว่าพายได้ดีกว่า Flot

Bluffสร้างกราฟเส้นที่ดูดี แต่ฉันมีปัญหากับพายของมันเล็กน้อย

ไม่ได้เป็นสิ่งที่ผมหลัง แต่อีกหนึ่งผลิตภัณฑ์ในเชิงพาณิชย์ (เหมือน Highcharts) เป็นTeeChart


4

Chart.jsมีประโยชน์มากรองรับแผนภูมิประเภทอื่น ๆ อีกมากมายเช่นกัน

สามารถใช้ได้ทั้งกับ jQuery และไม่มี


1
ไลบรารีแผนภูมิวงกลมที่ยอดเยี่ยม ฉันใช้ charts.js สำหรับแผนภูมิวงกลมและ morris.js สำหรับสิ่งอื่น ๆ morris.js ยอดเยี่ยมมากยกเว้นชาร์ตโดนัท f! & * # โง่ ๆ เมื่อฉันต้องการแผนภูมิวงกลมจริงที่ไม่มี af! ^ & * @ donut hole อยู่ในนั้นฉันมองไม่ไกลไปกว่า charts.js Charts.js น่าจะเป็นโซลูชันที่ยอดเยี่ยมสำหรับแผนภูมิประเภทอื่น ๆ เช่นกัน แต่คุณไม่สามารถเอาชนะ API ของ morris.js ที่ใช้งานง่ายอย่างไม่น่าเชื่อโดยเจตนา
ChiliNUT

3

มีผู้เล่นใหม่ในสนามที่นำเสนอแผนภูมิการนำทางขั้นสูงที่ใช้ Canvas สำหรับภาพเคลื่อนไหวและประสิทธิภาพที่ราบรื่นเป็นพิเศษ:

https://zoomcharts.com/

ตัวอย่างแผนภูมิ:

แผนภูมิวงกลมแบบโต้ตอบ

เอกสารประกอบ: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

สิ่งที่ยอดเยี่ยมเกี่ยวกับ lib นี้:

  • ชิ้นอื่น ๆ สามารถขยายได้
  • Pie นำเสนอการเจาะลึกสำหรับโครงสร้างลำดับชั้น (ดูตัวอย่าง)
  • เขียนตัวควบคุมแหล่งข้อมูลของคุณเองได้อย่างง่ายดายหรือจัดเตรียมไฟล์ json แบบธรรมดา
  • ส่งออกภาพความละเอียดสูงนอกกรอบ
  • รองรับการสัมผัสเต็มรูปแบบทำงานได้อย่างราบรื่นบน iPad, iPhone, Android และอื่น ๆ

ป้อนคำอธิบายภาพที่นี่

แผนภูมิให้บริการฟรีสำหรับการใช้งานที่ไม่ใช่เชิงพาณิชย์ใบอนุญาตเชิงพาณิชย์และการสนับสนุนทางเทคนิคที่มีให้เช่นกัน

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

ป้อนคำอธิบายภาพที่นี่

แผนภูมิมาพร้อมกับ API และการตั้งค่าที่ครอบคลุมดังนั้นคุณจึงสามารถควบคุมทุกแง่มุมของแผนภูมิได้


คุณหมายถึงอะไร? เรามีสิ่งอำนวยความสะดวกในการครอบตัดภาพอยู่แล้วในตัว
jancha

0

ตรวจสอบTeeChart สำหรับ Javascript

  • ฟรีสำหรับการใช้งานที่ไม่ใช่เชิงพาณิชย์

  • รวมปลั๊กอินสำหรับjQuery , Node.js, WordPress, Drupal, Joomla, ไมโครซอฟท์ typescript ฯลฯ ...

  • การสาธิตการโต้ตอบที่นี่และที่นี่

  • ภาพหน้าจอบางส่วนของการสาธิตบางส่วน:

TeeChart Javascript - บาร์

TeeChart Javascript - พาย

TeeChart Javascript - คะแนน

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.