पाई, बार, लाइन: कैनवास

Question

से बेहतर एसवीजी/वीएमएल मुझे "मानक" चार्टिंग के लिए लाइब्रेरी चुनने की आवश्यकता है: पाई, लाइनें और बार।

जो मैंने पढ़ा है, उससे मुझे लगता है कि सबसे अच्छा प्रारूप एसवीजी/वीएमएल है, उदाहरण के लिए हाईचार्ट्स की तरह। एसवीजी सभी प्रमुख ब्राउज़रों में मानक बन रहा है, अब आईई 9 इसे स्वीकार करता है। कैनवास की तुलना में पुनर्विक्रय और निर्यात करना आसान लगता है।

फिर भी, मुझे लगता है कि कई चार्टिंग लाइब्रेरी कैनवास पर भरोसा करते हैं। क्या मैं कुछ भूल रहा हूँ? क्या ऐसे अनुप्रयोगों के लिए एसवीजी पर कैनवास पर विचार करने का कोई कारण है?

Answer 1

आप आम तौर पर एक ही परिणाम प्राप्त कर सकते हैं। दोनों उपयोगकर्ता के लिए स्क्रीन पर ड्राइंग पिक्सल को समाप्त करते हैं। प्रमुख अंतर यह है कि एचटीएमएल 5 कैनवास आपको परिणामों (पठन और लेखन दोनों) पर पिक्सेल-स्तरीय नियंत्रण देता है, जबकि एसवीजी बनाए रखा गया मोड ग्राफिक्स एपीआई है जो घटनाओं को संभालने में आसान बनाता है या जावास्क्रिप्ट या एसएमआईएल के साथ कलाकृति में हेरफेर करता है एनीमेशन और आपके लिए सभी की देखभाल की गई है।

सामान्य तौर पर, मैं HTML5 कैनवास का उपयोग कर यदि आप सुझाव देंगे: प्रभाव पर

• जरूरत पिक्सेल स्तर नियंत्रण (जैसे धुंधला किए जाने या blending)
• डेटा बिंदुओं कि हो जाएगा की एक बहुत बड़ी संख्या है एक बार प्रस्तुत (और शायद आलोचना), लेकिन अन्यथा स्थिर हैं

उपयोग एसवीजी यदि आप:

• घटनाओं से जुड़े होने के लिए स्क्रीन पर खींची गई जटिल वस्तुएं (उदा। किसी डेटा पॉइंट पर ले जाने के एक टूलटिप देखने के लिए)
• परिणाम उच्च संकल्प में अच्छी तरह से मुद्रित करने के लिए विभिन्न ग्राफ भागों के आकार चेतन करने के लिए स्वतंत्र रूप से
• अपने उत्पादन में लेख है जिसे आप होना चाहते हैं सहित किया जाएगा
• जरूरत चाहते हैं खोज इंजन द्वारा अनुक्रमित
• एक्सएमएल और/या XSLT उपयोग करने के लिए उत्पादन

Answer 2

कैनवास की आवश्यकता नहीं है जब तक कि आप भारी हेरफेर/एनीमेशन नहीं चाहते हैं या 10,000+ चार्ट होने जा रहे हैं। प्रदर्शन विश्लेषण पर अधिक here.

भेद बनाना भी महत्वपूर्ण है: चार्टिंग और आरेखण दो अलग-अलग चीजें हैं। कुछ बार चार्ट प्रदर्शित करना (उदाहरण के लिए) 10,000+ चलने योग्य, लिंक-सक्षम, संभावित-एनिमेटेड ऑब्जेक्ट्स के साथ आरेखण फ़्लोचार्ट बनाने से बहुत अलग है।

प्रत्येक एसवीजी तत्व एक डोम तत्व है, और डीओएम में 10,000 या 100,000 नोड जोड़ने से अविश्वसनीय मंदी होती है। लेकिन कैनवास में कई तत्व जोड़ना पूरी तरह से करने योग्य है, और यह काफी तेज़ हो सकता है।

यदि यह आपको भ्रमित कर सकता है: राफेलजेएस (मेरी राय में सबसे अच्छा चार्टिंग एसवीजी लाइब्रेरी) कैनवास शब्द का उपयोग करती है, लेकिन यह HTML <canvas> तत्व से संबंधित कोई तरीका नहीं है।

Answer 3

पिछले दो वर्षों में उत्पादन करने के लिए चाहते हैं, मेरी प्राथमिकता, svg का उपयोग करने के रूप में मैं मुख्य रूप से अपेक्षाकृत छोटे डेटासेट पाई का निर्माण करने के साथ सौदा कर दिया गया है , कॉलम चार्ट या मानचित्र।

हालांकि कैनवास के साथ मैंने पाया एक लाभ चार्ट को छवि के रूप में सहेजने की क्षमता toDataURL विधि के लिए धन्यवाद है। मुझे svg के बराबर नहीं मिला है, और ऐसा लगता है कि एक एसवीजी चार्ट क्लाइंट पक्ष को सहेजने का सबसे अच्छा तरीका इसे कैनवास में परिवर्तित करना है (उदाहरण के लिए canvg)।