d3.js और chart.js (केवल चार्ट के लिए) के बीच तुलना

Question

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

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

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

Answer 1

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

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

इसके अलावा दोनों के बीच सबसे स्पष्ट अंतर यह है कि Chart.js कैनवास आधारित है, जबकि d3.js मुख्य रूप से एसवीजी के बारे में है। (अब मैं मुख्य रूप से क्योंकि एसवीजी सभी प्रकार के HTML तत्वों को you could even use it में कैनवास बनाने में आपकी सहायता के लिए उपयोग कर सकता है।) सामान्य कैनवास में बड़ी संख्या में तत्वों के लिए एसवीजी निष्पादित किया जाएगा (मैं बहुत बड़ी बात कर रहा हूं - हजारों अंक, रेखाएं, आदि ...)। दूसरी तरफ, एसवीजी, हस्तक्षेप करना और बातचीत करना आसान है। प्रत्येक बिंदु, रेखा, आदि के साथ एसवीजी के साथ डीओएम का हिस्सा बन जाता है - आप अब उस बिंदु को हरा चाहते हैं, बस इसे बदलें। कैनवास के साथ यह एक स्थिर ड्राइंग है जिसे किसी भी बदलाव के लिए फिर से खींचा जाना था - बेशक यह इतनी तेजी से खींचता है कि आप आमतौर पर कभी ध्यान नहीं देंगे। माइक्रोसॉफ्ट से यहां some good reading है।

Answer 2

UPDATED 2016

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

d3.js - इंटरैक्टिव दृश्यावलोकन

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

A few other charting libraries बढ़ती जा रही है इसलिए परीक्षण रखें और open source में योगदान देना न भूलें!

Answer 3

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

1. सी 3, जो डी 3 पर आधारित है और इसलिए एसवीजी
2. चार्ट का उपयोग करता है।जेएस जो कैनवास

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

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

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

सी 3 ने आधुनिक एंड्रॉइड और आईफोन उपकरणों पर लगभग 1500-1800 एमएस लिया। आईफोन ने एंड्रॉइड की तुलना में 100 एमएमएस बेहतर प्रदर्शन किया।

चार्ट.जेएस ने लगभग 400-800ms लिया। एंड्रॉइड ने आईफोन की तुलना में 300 एमएमएस बेहतर प्रदर्शन किया।

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

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

आशा है कि मदद करता है