हाई चार्ट

Question

में प्रति माह प्वाइंटइंटरवल्स सेट करने के लिए कैसे मैंने मासिक आधार पर बनाए गए उपयोगकर्ताओं की संख्या प्लॉट करने के लिए हाईचर्ट्स का उपयोग किया। मैं x- अक्ष में महीने दिखाने में कामयाब रहे और मैं नीचे

pointInterval रूप pointInterval सेट: 24 * 3600 * 1000 * 31

लेकिन यह आँख बंद करके दिया गया था और इसे सही ढंग बिन्दु नहीं होंगे। मुझे हर महीने अंक 1 प्लॉट करने की जरूरत है। लेकिन उपरोक्त अंतराल महीने के पहले दिन नहीं, मासिक आधार पर अंक बांधने में मदद करता है। यह example मेरी समस्या का वर्णन करता है। टूलटिप स्पष्ट विचार देता है। यहाँ मेरी कोड

series: [{ 
     type: 'area', 
     name: 'CDP Created', 
     pointInterval: 24 * 3600 * 1000 * 31, 
     pointStart: Date.UTC(2005, 0, 01),   
     dataGrouping: { 
      enabled: false 
     }, 
     data: [0, 0, 0, 0, 0, 0, 0, 148.5, 216.4, 194.1, 95.6, 54.4] 

    }] 

pointInterval महीने पर निर्भर करता है स्थापित करने के लिए वहाँ वैसे भी है है। क्योंकि अगर मैंने उपरोक्त बिंदु अंतराल दिया है तो यह हर 31 दिनों की गणना करेगा। यह समस्या तब होती है जब महीने में 28 या 30 दिन होते हैं। इसे कैसे प्राप्त करें। कंटेनर div की चौड़ाई समायोजित करने से x-axis मान ठीक से प्रदर्शित नहीं होते हैं। अग्रिम धन्यवाद

Answer 1

दुर्भाग्य से यह संभव नहीं है - pointInterval केवल दिए गए नंबर से वृद्धि, इसलिए अनियमित मूल्य संभव नहीं है। हालांकि, अगर आप सीधे एक्स-मूल्य निर्धारित कर सकते हैं, देखें: http://jsfiddle.net/kUBdb/2/

जे एस के बारे में अच्छी बात यह है कि

Date.UTC(2007, 10, 10) == Date.UTC(2005,34, 10) 

रिटर्न सच है तो आप स्वतंत्र रूप से एक के बाद महीने के बाद बढ़ा सकते हैं।

Answer 2

आप xaxis मान (महीने के अनुसार) गतिशील रूप से पॉप्युलेट कर सकते हैं और yxais डेटा के साथ एक साथ धक्का दे सकते हैं। कोड होगा जैसे:

var s = {name: 'serial name', data: []}, 
    serialData = [], categories = []; 
var flatData = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120], 
    startDate = Date.UTC(2000, 1, 1); 
// Set the xaxis value as first day of month 
for (var i = 0; i < flatData.length; i++) { 
    var d = new Date(); 
    d.setTime(startDate); 
    d.setMonth(d.getMonth() + i); 
    categories.push(d.getTime()); 
} 
for (var i = 0; i < flatData.length; i++) { 
    s.data.push([categories[i], flatData[i]]); 
} 
serialData.push(s); 

$('#canvas').highcharts({ 
    ...... 
    xAxis: { 
     type: 'datetime', 
    } 
    serial: serialData 
}); 

फिर xaxis लेबल 'महीने से' होगा। उदाहरण यहां दिया गया है: JSFiddle।

विचार यहां से आयात किया गया है: HighCharts Demo।

Answer 3

आप मैन्युअल तारीख टैग पैदा करते हैं और इस तरह से उन्हें डेटा सूची में जोड़ सकते हैं:

series: [{ 
     data: [["Jan 1, 2005", 0], ["Feb 1, 2005", 0], ..., ["Dec 1, 2005", 54.4]], 
     pointInterval: 24 * 3600 * 1000 * 31, 
     pointStart: Date.UTC(2005, 0, 01)   
    }] 

इस तरह, आप pointInterval उपयोग कर सकते हैं के रूप में (पर X- अक्ष अनुमानित दृश्य के लिए) है, और प्रयोग चार्ट डॉट्स पर सटीक डेटा के लिए टैग करें।

यदि आप चार्ट में ज़ूम करते हैं तो आपको डॉट्स और एक्स-एक्सिस टिक्स के बीच मामूली ओवरलैप दिखाई देगा, लेकिन अगर आपको सही संरेखण की आवश्यकता नहीं है तो यह चाल चलनी चाहिए।

तारीख टैग (जैसे, "जनवरी 1 2005") उत्पन्न करने के लिए मैं कुछ इस तरह करना होगा:

var data = [0, 0, 0, 0, 0, 0, 0, 148.5, 216.4, 194.1, 95.6, 54.4]; 
var date = new Date("January 1, 2005"); 
var monthNameList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 

for (i = 0; x < data.length; i++) 
{ 
    var stringDate = monthNameList[date.getMonth()] + " 1, " + date.getFullYear(); 
    resultList.push(stringDate); 
    date.setMonth(date.getMonth() + 1); 
} 

फिर आंकड़ों के प्रत्येक आइटम जोड़ें।

संपादित: मुझे लगता है कि उपरोक्त पहला उत्तर दिनांक टैग उत्पन्न करने का एक बहुत साफ तरीका है। (JSFiddle जांचें)