D3.js और chart.js (केवल चार्ट के लिए) के बीच तुलना [बंद]


88

मैंने कई बार अपनी परियोजनाओं में चार्ट.ज का इस्तेमाल किया है लेकिन मैंने कभी भी d3.js. बहुत सारे लोग कहते हैं कि चार्ट के लिए d3.js सबसे अच्छा जावास्क्रिप्ट फ्रेमवर्क है, लेकिन उनमें से कोई भी यह समझाने में सक्षम नहीं है कि, खासकर जब मैं चार्ट की तुलना करना चाहता हूं।

मुझे यह मिल गया है: http://www.fusioncharts.com/javascript-charting-comparison/ लेकिन यह वह नहीं है जिसकी मुझे तलाश थी।

क्या किसी को प्रयोज्यता और प्रदर्शन के संदर्भ में इन रूपरेखाओं की तुलना के बारे में पता है (केवल चार्ट के लिए)?


1
बस मज़े के लिए, मैं एक ही डेटासेट के साथ d3.js का उपयोग करके चार्ट.js मूल चार्ट विकसित कर रहा हूं। आप देख सकते हैं - s.codepen.io/bumbeishvili/debug/RGbvPg
bumbeishvili

अपडेट 2018 d3 में कैनवास भी है
PirateApp

जवाबों:


215

d3.js"चार्टिंग" लाइब्रेरी नहीं है। यह SVG / HTML बनाने और हेरफेर करने के लिए एक पुस्तकालय है। यह आपके डेटा की कल्पना और हेरफेर करने में आपकी सहायता करने के लिए उपकरण प्रदान करता है। जबकि आप इसे पारंपरिक चार्ट (बार, लाइन, पाई, आदि ...) बनाने के लिए उपयोग कर सकते हैं, यह इतना अधिक सक्षम है। बेशक इसके साथ "इतना सक्षम" एक स्टेटर सीखने की अवस्था में आता है। वहाँ पारंपरिक चार्टिंग के ऊपर एक बने पुस्तकालयों के एक बहुत हैं d3.js- nvd3.js, dimple.js, dc.jsयदि आप उस मार्ग जाना चाहते हैं।

मैं परिचित नहीं हूं, Chart.jsलेकिन वेबसाइट पर एक त्वरित नज़र मुझे बताती है कि यह मिल चार्टिंग लाइब्रेरी के एक रन से अधिक है। यह 6 मूल चार्ट प्रकारों का समर्थन करता है और आप कभी भी इसके साथ इस तरह का सामान नहीं करने जा रहे हैं । लेकिन एपीआई सीधा दिखता है और मुझे यकीन है कि इसका उपयोग करना आसान है।

इसके अलावा दोनों के बीच सबसे स्पष्ट अंतर Chart.jsकैनवास आधारित है, जबकि d3.jsमुख्य रूप से एसवीजी के बारे में है। (अब मैं मुख्य रूप से कहता हूं क्योंकि d3.jsसभी प्रकार के एचटीएमएल तत्वों में हेरफेर कर सकते हैं ताकि आप इसका इस्तेमाल किसी कैनवास पर खींचने में मदद करने के लिए भी कर सकें ।) सामान्य तौर पर कैनवस बड़ी संख्या में तत्वों के लिए एसवीजी का प्रदर्शन करेगा (मैं बहुत बड़ी बात कर रहा हूं - हजारों अंक, लाइनों, आदि ...)। दूसरी ओर, एसवीजी के साथ हेरफेर और बातचीत करना आसान है। एसवीजी के साथ प्रत्येक बिंदु, लाइन, आदि डोम का हिस्सा बन जाता है - आप उस बिंदु को अब हरा चाहते हैं, बस इसे बदल दें। कैनवास के साथ इसकी एक स्थैतिक ड्राइंग जो किसी भी बदलाव के लिए फिर से तैयार की जानी थी - निश्चित रूप से यह इतनी तेजी से खींचती है कि आप आमतौर पर कभी नोटिस नहीं करेंगे। यहाँ Microsoft से कुछ अच्छा पढ़ना है।


6
@emrah, लिंक पुराना हो सकता है (IE9 के समय के आसपास) लेकिन प्रदान की गई जानकारी अभी भी बहुत प्रासंगिक है।
मार्क

36

चूंकि मैं मोबाइल उपकरणों पर चार्ट दिखाने के लिए एक तेज़ चार्टिंग लाइब्रेरी खोजने की कोशिश कर रहा हूं, इसलिए प्रदर्शन मेरे लिए महत्वपूर्ण था। इसके पास एक लाइसेंस भी होना चाहिए जो व्यावसायिक रूप से उपयोग करना संभव बनाता है। मैंने तुलना की:

  1. c3, जो d3 पर आधारित है और इसलिए SVG का उपयोग करता है
  2. chart.js जो कैनवास का उपयोग कर रहा है

चार्ट्स को मूल एप्लिकेशन के अंदर एक वेब व्यू घटक के अंदर लोड किया जाता है और सभी डेटा (जेएस लाइब्रेरी सहित) स्थानीय है, इसलिए http अनुरोधों के कारण धीमा नहीं होता है। प्रदर्शन को और भी अधिक करने के लिए, मैंने अतिरिक्त रूप से एक ही फाइल के अंदर सब कुछ डाल दिया।

मैंने लगभग 500 डेटा पॉइंट्स के साथ 4 चार्ट (लाइन, बार, पाई, लाइन / बार कॉम्बो) लोड किए।

मेरा समय HTML पेज की वास्तविक लोडिंग को बाहर करने का था। मैंने उस क्षण को मापा जब मैंने रेंडरिंग के अंत तक चार्टिंग लाइब्रेरी कोड का उपयोग करना शुरू कर दिया था। सभी चार्ट एनीमेशन को बंद कर दिया गया था।

C3 ने आधुनिक Android और IPhone उपकरणों पर लगभग 1500-1800 ms लिए। iPhone ने Android की तुलना में लगभग 100ms बेहतर प्रदर्शन किया।

Chart.js ने लगभग 400-800ms का समय लिया। Android ने iPhone की तुलना में लगभग 300ms बेहतर प्रदर्शन किया।

कोई आश्चर्य नहीं, एसवीजी धीमी है। आपके उपयोग के मामले के आधार पर, शायद बहुत धीमी गति से।

C3 में एक डेस्कटॉप कंप्यूटर रेंडरिंग लगभग 150-200ms और चार्ट .js लगभग 80-100ms का था। एंड्रॉइड और आईफोन एमुलेटर में एक ही परीक्षण चलाने पर डेस्कटॉप के समान परिणाम था। इसलिए हार्डवेयर / प्रोसेसिंग सीमा के कारण मोबाइल उपकरणों पर धीमा होना निश्चित है।

उम्मीद है की वो मदद करदे


21

2016 को अद्यतन

अंगूठे का सामान्य नियम है:

d3.js - इंटरैक्टिव विज़ुअलाइज़ेशन के लिए महान

chart.js - त्वरित और सरल के लिए महान

कुछ अन्य चार्टिंग लाइब्रेरी बढ़ रही हैं, इसलिए परीक्षण करते रहें और खुले स्रोत में योगदान करना न भूलें !


0
    chart.js
  • यह HTML5 कैनवस टैग का उपयोग करता है, जो पिक्सेल पर निर्भर है, इसलिए जब आप चार्ट का आकार बदल देते हैं। जेएस उत्पन्न ग्राफ आपको ढीला स्पष्टता देता है
  • यह घोषणात्मक है, इसका मतलब है कि आपको ग्राफ़ बनाने के लिए आवश्यक इनपुट की घोषणा करनी होगी
  • सीखने की अवस्था कम है
  • उत्पन्न चार्ट के प्रकार पूर्वनिर्धारित और सीमित हैं
    d3.js
  • यह svg का उपयोग करता है जो कि रिज़ॉल्यूशन इंडिपेंडेंट है, इसलिए जब आप d3 जेनरेट किए गए ग्राफ का आकार बदलते हैं तो आप स्पष्टता को ढीला नहीं करेंगे
  • यह जरूरी है, मतलब आपको चार्ट बनाने के लिए कुछ तर्क लिखने होंगे
  • तेजी से सीखने की अवस्था
  • उत्पन्न चार्ट के प्रकार पूर्वनिर्धारित नहीं हैं और आप अपनी इच्छानुसार कोई भी चार्ट बना सकते हैं
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.