2013-02-25 50 views
6

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

http://jsfiddle.net/U8nZ6/

आप डेमो में देख सकते हैं, $ 20k के बावजूद data1/data2 सरणी की पहली पंक्ति में किया जा रहा है, यह प्रत्येक बार (दाईं ओर सभी तरह) के अंतिम हिस्सा है। मैं इसे क्रम में रखना चाहता हूं, इसलिए मैंने कुछ चीजों की कोशिश की:

1) चार्ट को सरणी .reverse() डी के साथ प्रस्तुत करें। आप उपरोक्त डेमो पर उन पंक्तियों को सक्षम करने के लिए सक्षम कर सकते हैं ताकि इसका नतीजा यह हो कि रंग प्रत्येक पंक्ति में रिकॉर्ड्स की एक अलग संख्या के बाद लाइन नहीं होते हैं, इसलिए यह काम नहीं करेगा (और केवल एकमात्र नहीं होना चाहिए ऐसा करने का तरीका, मुझे यकीन है)

2) xAxis.reversed = true का उपयोग करें। यह रंगों के मिलान के साथ सही क्रम में रखता है, लेकिन फिर पौराणिक कथाओं को उलट दिया जाता है (100% से 0%) और यह दाएं से बाएं एनिमेट करता है।

क्या इसके आसपास कोई और तरीका है?

विकल्प 2 ऊपर (अक्ष पीछे) में वर्णित का उपयोग करना, मैं बस लेबल फ़ॉर्मेटर के माध्यम से संशोधित होने के लिए:

उत्तर

3

ठीक है, कोई विकल्प नहीं है यह सोचते हैं, यहाँ है कि मैं क्या मामले में किसी को भी गूगल के माध्यम से इस पर ठोकर साथ चला गया है उलटा

मेरे मामले में, के बाद से यह प्रतिशत (0-100) है, मैं सीधे शब्दों में:

labels: { formatter: function() { return Math.abs(this.value - 100) } }

1

मैं एक ऐसी ही समस्या थी। विभिन्न विकल्पों को आजमाने के बाद मैंने चार्ट को प्रस्तुत करने से पहले श्रृंखला श्रृंखला को सेट करना समाप्त कर दिया। जेनेरिक कोड:

if (options.chart.type === 'bar') { 

    for (var i = 0; i < options.series.length; i++) { 
     options.series[i].index = options.series.length - 1 - i; 
     options.series[i].legendIndex = i; 
    } 
} 

अपने उदाहरण के लिए अपडेट किया गया jsFiddle: http://jsfiddle.net/U8nZ6/23/

2

ऐसा लगता है जैसे वहाँ एक विकल्प बुलाया reverseStacks (http://api.highcharts.com/highcharts#yAxis.reversedStacks) कि स्टैक किए गए चार्ट के लिए सच करने के लिए चूक। आप इसे अपने कोड में गलत पर सेट करना चाहते हैं।

मैंने देखा है कि आपका JSFiddle विशेष रूप से हाईचार्ट्स संस्करण 2.3.5 का अनुरोध करता है, जिसमें यह विकल्प संभवतः वहां नहीं है।

1

यदि कोई भी अभी भी इसकी तलाश कर रहा है। मैंने का उपयोग किया: मेरी किंवदंती में सही

legend: { 
      align: 'right', 
      x: -30, 
      verticalAlign: 'top', 
      y: 25, 
      floating: true, 
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
      borderColor: '#CCC', 
      borderWidth: 1, 
      shadow: false, 
      reversed: true // right here! 
     }