हाइचार्ट्स: xAxis वार्षिक लेबल टिकों के बीच केंद्रित

Question

मैं मासिक डेटा बिंदुओं के साथ एक रेखा चार्ट तैयार कर रहा हूं। हालांकि, मैं चाहता हूं कि स्केल केवल साल के तारों को प्रदर्शित करे। अभी तक, इतना आसान है। हालांकि, जहां तक ​​मैं देख सकता हूं, हाईएक्ट्स हमेशा टिकों के सापेक्ष एक्सएक्सिस लेबल खींचेंगे ... और मुझे उन्हें टिकों के बीच केंद्रित करने की आवश्यकता है। क्या ऐसा करने का कोई आसान तरीका है कि मैं याद कर रहा हूं, कृपया ...?

Answer 1

कई xAxis विकल्प हैं जो आप जो चाहते हैं उसे करने में मदद कर सकते हैं।

http://api.highcharts.com/highcharts#xAxis.labels

'align' जो निर्दिष्ट करती है कि लेबल बाईं या टिक के अधिकार के लिए कर रहे हैं, और यह भी 'एक्स' जो आप निर्दिष्ट कर सकते हैं पर एक नज़र डालें एक एक्स-ऑफसेट से लेबल के लिए टिकटिक।

Answer 2

क्या आपने टिक प्लेसमेंट का उपयोग करने का प्रयास किया है? http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement

Answer 3

मेरी समझ के अनुसार, व्यवहार आप की इच्छा है:

:
1. मासिक डाटा
एक डेटा एक महीने के लिए इसी बिंदु अंक:
http://jsfiddle.net/msjaiswal/U45Sr/2/

मुझे नीचे समाधान तोड़ने चलो

var data = [ 
    [Date.UTC(2003,1),0.872], 
    [Date.UTC(2003,2),0.8714], 
    [Date.UTC(2003,3),0.8638], 
    [Date.UTC(2003,4),0.8567], 
    [Date.UTC(2003,5),0.8536], 
    [Date.UTC(2003,6),0.8564], 
    .. 
] 

2. केवल वार्षिक टिक प्रदर्शित करने के लिए स्केल
01 इस तरहउपयोग चार्ट विकल्प:

 xAxis: { 
     minRange : 30 * 24 * 3600 * 1000, // 
     minTickInterval: 12* 30 * 24 * 3600 * 1000 // An year 
    }, 

Answer 4

यह मैन्युअल रूप से एक कॉलबैक के माध्यम से लेबल स्थिति का समायोजन (दोनों लोड पर कहा जाता है और पुनः बनाने) द्वारा एक समाधान के साथ किया जा सकता। कृपया इस पोस्ट पर मेरी टिप्पणी में जुड़ी हुई पहेली देखें: Highcharts - how can I center labels on a datetime x-axis?

Answer 5

कोई आसान, आउट-ऑफ-द-बॉक्स समाधान नहीं है। आपको घटनाओं का उपयोग करना होगा और तदनुसार लेबल को दोबारा बदलना होगा। यहां एक नमूना समाधान भी जब ब्राउज़र विंडो का आकार (या अन्यथा पुनः बनाने का चार्ट मजबूर कर), काम करता है वह यह है कि जब भी टिक गिनती परिवर्तन: http://jsfiddle.net/McNetic/eyyom2qg/3/

यह दोनों load और redraw के लिए एक ही ईवेंट हैंडलर संलग्न द्वारा काम करता है घटनाओं:

$('#container').highcharts({ 
    chart: { 
    events: { 
     load: fixLabels, 
     redraw: fixLabels 
    } 
    }, 
[...] 

हैंडलर ही इस तरह दिखता है:

var fixLabels = function() { 
    var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) { 
    return +parseInt($(a).css('left')) - +parseInt($(b).css('left')); 
    }); 
    labels.css('margin-left', 
    (parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left')))/2 
); 
    $(labels.get(this.xAxis[0].tickPositions.length - 1)).remove(); 
}; 

असल में, यह इस तरह से काम करता है:

1. सभी मौजूदा लेबल प्राप्त करें (जब पुन: खींचा जाए, इसमें नए जोड़े गए हों)। 2. क्रमबद्ध सीएसएस संपत्ति से 'छोड़'
2. की गणना पहले दो लेबल के बीच ऑफसेट (वे कुछ redrawing के बाद इस तरह से पृथक नहीं किया जा) मार्जिन के रूप में ऑफसेट की
3. सेट आधे (ऑफसेट सभी लेबल के लिए एक ही है) - सभी लेबलों के बाएं, प्रभावी ढंग से आधे ऑफसेट को दाईं ओर स्थानांतरित कर रहे हैं।
4. सही लेबल हटाएं (चार्ट के बाहर ले जाया गया है, कभी-कभी आंशिक रूप से दिखाई देता है)।