Morris.js: jQuery और Raphaël के साथ सुंदर रेखांकन खींचने के लिए एक उपकरण

कल मोज़िला हैक्स वीकली अंक में , मैंने मॉरिस.ज हाइपरलिंक को देखा , उसका अनुसरण किया, इसे पढ़ा, आनन्दित हुआ और अब मैं आपको बताऊंगा।

मॉरिस एक ओपन-सोर्स लाइटवेट जावास्क्रिप्ट (केवल 3052 बाइट्स के बाद लघुकरण) (सरलीकृत बीएसडी लाइसेंस के तहत वितरित ) है, जिसे काम करने के लिए jQuery और Raphaël की आवश्यकता होती है और उन्हें क्षैतिज रेखाओं के एक साधारण ग्रिड पर बनाता है, जैसे:



समय एब्सिस्सा पर प्लॉट किया जाता है, और किसी भी समय - निर्भर मूल्यों को ऑर्डिनेट पर प्लॉट किया जाता है। (मॉरिस मूल रूप से यूके में एक विशेष ब्रांड की कारों की कुल संख्या दिखाने वाली साइट के लिए डिज़ाइन किया गया था, इसलिए उनके लिए यह स्वाभाविक है कि एब्सिस्सा अक्ष समय की धुरी है।)

ग्राफ माउस का जवाब देते हैं: समय प्रफुल्लित करने में माउस द्वारा इंगित क्षण के अनुरूप अंक, और संकेत उनके पास दिखाई देते हैं।

स्क्रिप्ट का लाभ एपीआई की सादगी है। मेरे द्वारा उद्धृत उदाहरण इस कॉल के साथ बनाया गया है:

//  ,  ,       Morris.Line({ element: 'quarterly', data: [ {q: '2009 Q3', a: 100, b: 75}, {q: '2010 Q2', a: 75, b: 50}, {q: '2010 Q3', a: 75, b: 50}, {q: '2011 Q1', a: 50, b: 25}, {q: '2011 Q3', a: 50, b: 25}, {q: '2011 Q4', a: 75, b: 50}, {q: '2012 Q2', a: 100, b: 75} ], xkey: 'q', ykeys: ['a', 'b'], labels: ['Series A', 'Series B'], lineColors: ['#167f39','#044c29'], lineWidth: 2 }); 

एपीआई का उपयोग करने के सभी आवश्यक विवरण मूल स्रोत में पर्याप्त विवरण में वर्णित हैं - सबसे अधिक संभावना है, आपको खुले स्रोत पर झांकने की आवश्यकता नहीं होगी।

केवल एक ही चीज है कि "मॉरिस", मेरी राय में, क्षैतिज के लिए लंबवत लाइनों की कमी है। ताकि एक ही समय से मूल्यों का कनेक्शन तुरंत प्रकट हो, और न केवल तब जब माउस को ऊपर लाया जाए।

मैं यह भी भविष्यवाणी करता हूं कि कुछ लोगों के लिए, मॉरिस के काम का परिणाम अत्यधिक सरल प्रतीत होगा। हालांकि, वे हमेशा gRaphaël की मदद का सहारा ले पाएंगे और इस तरह कुछ और परिष्कृत ग्राफिक्स बनाएंगे।