🏵️ 🛌🏿 👵🏽 हाईस्टॉक: मॉनिटर रनेट अवार्ड 🍠 🚴🏼 👩‍👩‍👦

अपनी परियोजनाओं में लंबे समय तक मैंने सामान्य चित्रों के बजाय फ्लैश-ग्राफिक्स का उपयोग किया। वे अधिक सुंदर और अधिक कार्यात्मक हैं, और सर्वर को चित्रों को उत्पन्न करने के लिए तनाव की आवश्यकता नहीं है। लेकिन इस तथ्य के कारण कि कुछ कंपनियां फ्लैश के साथ बहुत अनुकूल नहीं हैं, मुझे फ्लैश का उपयोग किए बिना प्रतिस्थापन की तलाश करनी थी।

इससे पहले कि मैंने AmCharts का उपयोग किया, मैंने पहली बार उनकी वेबसाइट को देखा, उन्होंने पहले से ही अपने ग्राफ़ का एक JS संस्करण जारी किया था, लेकिन किसी तरह मैंने इसे पसंद नहीं किया, यह अभी तक नम लगा। एक छोटे से गोग्लिंग के बाद, हाईस्टॉक पाया गया था, हाईचरट्स जेएस के लेखकों से। यह बड़ी संख्या में अंक, स्केलिंग, सुविधाजनक नेविगेशन के साथ समयबद्ध चार्ट प्रदर्शित करने की क्षमता से पहले स्थान पर है। हां, और विशुद्ध रूप से बाह्य रूप से मुझे अधिक AmCharts पसंद है।

डेटा संग्रह

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

मैं विशेष रूप से तैयारी को सामान्य शब्दों में चित्रित नहीं करूंगा। चूँकि मुझे पुरस्कार से कोई लेना-देना नहीं है, मैंने सिर्फ एक PHP स्क्रिप्ट लिखी है जो मुख्य पृष्ठ को डाउनलोड करती है, इसे नियमित रूप से जारी करती है, जिसके बाद डेटाबेस में वोट और पदों की संख्या दर्ज की जाती है। स्क्रिप्ट मुकुटों पर लटका दी गई है और हर 5 मिनट में चलती है।

डेटा की तैयारी

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

डिफ़ॉल्ट रूप से, पहले 3 स्थान प्रदर्शित होते हैं।
10 पदों (1-10,11-20, आदि) की रेंज।
विशिष्ट साइटों की पसंद (1,3,10)।
यदि केवल एक साइट का चयन किया जाता है, तो उसके निकटतम प्रतिद्वंद्वियों को भी दिखाया जाता है, एक उच्च स्तर पर, दूसरा नीचे की स्थिति में।

इसके बाद, आपको जनरेट किए गए डेटा के प्रारूप पर निर्णय लेना होगा। हाईस्टॉक में 3 विकल्पों को समझता है।

वाई अक्ष के लिए मानों के साथ एक सरल सरणी, ऐसे मामलों में, एक्स मानों की गणना निर्दिष्ट नियमों के अनुसार स्वचालित रूप से की जाती है।
```
data: [0, 5, 3, 5] 
```
एक्स, वाई के मूल्यों से युक्त एक सरणी।
```
 data: [[5, 2], [6, 3], [8, 2]] 
```
वस्तुओं का सरणी - सबसे उन्नत विकल्प, कम से कम हर बिंदु को कॉन्फ़िगर करने की अनुमति देता है।
```
 data: [{ name: ' 1', color: '#00FF00', y: 0 }, { name: ' 2', color: '#FF00FF', y: 5 }] 
```

मैंने दूसरा विकल्प चुना, क्योंकि पहला इस तथ्य के कारण उपयुक्त नहीं था कि प्रीमियम समय-समय पर नीचे है और चार्ट में "छेद" हैं, और तीसरे में अनावश्यक कार्यक्षमता है जो इस मामले में आवश्यक नहीं है।

इसके अलावा, चूंकि मुझे कई ग्राफ़ प्रदर्शित करने की आवश्यकता है, इसलिए मैंने समय के दोहराव से छुटकारा पाने का फैसला किया। परिणामस्वरूप, PHP स्क्रिप्ट JSON प्रारूप में डेटा उत्पन्न करती है:

 data: [ [1, id1val, id2val,…,idNval], //   [2, id1val, id2val,…,idNval], //   … ]

जहां पहले मूल्य का मतलब समय (टाइमस्टैम्प को 300 सेकंड से विभाजित किया जाता है और प्रारंभ समय लिया जाता है)। प्रत्येक ग्राफ के लिए अलग-अलग सरणियों में डेटा परिवर्तित करने के लिए, हम एक फ़ंक्शन लिखते हैं

 //     var c = info.data.length; //   for(var i = 0, l = info.title.length; i < l; i++){ seriesOptions[i] = { name: info.title[i], //   data: [] //     }; for(var j = 0; j < c; j++){ //   timestamp      seriesOptions[i].data.push([(info.data[j][0] + 4404683) * 300000, info.data[j][i+1]]); } }

चार्ट के रूप को अनुकूलित करें

सबसे पहले, प्रदर्शित लेबल का रूसी में अनुवाद करें, हजारों विभाजक को बदलें, और समय को यूटीसी में प्रदर्शित न करें, लेकिन उपयोगकर्ता के स्थानीय समय में।

 Highcharts.setOptions({ lang: { rangeSelectorZoom: 'c', rangeSelectorFrom: '', rangeSelectorTo: '', thousandsSep: ' ' }, global: { useUTC: false } });

अगला, हम विकल्प ऑब्जेक्ट का उपयोग करके उपस्थिति को अनुकूलित करते हैं। पहले सामान्य विकल्प।

 chart: { renderTo: 'chart', // DIV       zoomType: 'x', //     X backgroundColor: '#f9f9f9' //     }

समय अंतराल के चयन के लिए बटन सेट करना।

 rangeSelector: { buttons: [{ //       type: 'hour', //  : 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' ( ), 'year' and 'all' count: 3, //     type text: '3 ' }, { type: 'all', text: '' }], inputDateFormat: '%d.%m.%Y', //          inputEditDateFormat: '%d.%m.%Y', buttonTheme: { width: 60 //    }, selected: 2 //      }

अब हम टूलटिप से निपटते हैं (जब आप चार्ट पर होवर करते हैं)

 tooltip: { backgroundColor: 'rgba(250, 250, 250, .85)', //    borderColor: 'rgba(100, 100, 100, .90)', //   (   ) xDateFormat: '%d.%m.%Y %H:%M', //    //      headerFormat: '<span style="font-size: 12px">{point.key}</span><br/>', //    ,   ,    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>' }

हम किंवदंती को चालू करते हैं और कॉन्फ़िगर करते हैं (डिफ़ॉल्ट रूप से यह बंद है)। निष्कर्ष के बाद से लाया गया
ग्राफ़ के तहत यह अभी भी अनाड़ी रूप से काम कर रहा है (समय पर सुपरिंपल), साथ ही साथ साइड पर आउटपुट (लंबे नाम सही ढंग से नहीं कटे हैं)

 legend: { enabled: true, align: 'center', itemWidth:234, //  ,     4  verticalAlign: 'top' }

परिणाम

सब कुछ एक साथ ढेर में डाल दिए जाने के बाद, हम सुविधा के लिए साइटों को चुनने के लिए बटन जोड़ते हैं। और "टाइटन्स की लड़ाई" देखें।

यह कैसा दिखता है :

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

और अंत में, कुछ लिंक:
Highcharts और Highstock की आधिकारिक वेबसाइट
हाईस्टॉक एपीआई द्वारा डॉक
आधिकारिक वेबसाइट amahharts

हाईस्टॉक: मॉनिटर रनेट अवार्ड

डेटा संग्रह

डेटा की तैयारी

चार्ट के रूप को अनुकूलित करें

परिणाम

More articles: