हाईचार्ट - केवल एक एक्स-अक्ष लेबल का रंग बदलें

Question

तो मुझे पता है कि हाईचार्ट में एक्स-अक्ष लेबल के रंग को कैसे बदला जाए, जो यहां वर्णित है।

http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-style/

लेकिन क्या होगा अगर मैं सिर्फ एक लेबल का रंग बदलना चाहते हैं, नहीं सभी लेबल? मैं व्यक्तिगत लेबल में शैली कैसे लागू करूं?

Answer 1

तुम भी शैली स्थापित करने के लिए लेबल-फ़ॉर्मेटर उपयोग कर सकते हैं मदद करता है। jsfiddle पर पूर्ण उदाहरण:

labels: { 
    formatter: function() { 
     if ('Jun' === this.value) { 
      return '<span style="fill: red;">' + this.value + '</span>'; 
     } else { 
      return this.value; 
     } 
    } 
} 

Answer 2

मुझे समझ में आया कि आप एक्स-अक्ष के अंदर एक विशिष्ट आइटम के लिए रंग बदलना चाहते हैं।

मैंने एपीआई को देखा लेकिन मुझे ऐसा करने का कोई आसान तरीका नहीं मिला।

आप एक कॉलबैक सेट कर सकते हैं के बाद से "तैयार घटना चार्ट" के लिए:

चार्ट (वस्तु विकल्प, समारोह कॉलबैक):

पैरामीटर

विकल्प: चार्ट विकल्प वस्तु के रूप में, बाएं मेनू में शीर्षक "विकल्प ऑब्जेक्ट" शीर्षक के तहत प्रलेखित।

कॉलबैक: समारोह

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

रिटर्न: बनाए गए चार्ट ऑब्जेक्ट का संदर्भ।

आप इसे एक गंदा तरीका में कर सकते हैं:

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      marginBottom: 80 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
      labels: { 

       style: { 
        color: 'red' 
       } 
      } 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]   
     }] 
    }, 
    function(c){ 

     // this relies in that te xAxis is before the yAxis 
     // also, setting the color with color: #ABCDEA didn't work 
     // you have to use fill. 
     $(".highcharts-axis:first text").each(function(i, label){ 
      var $label = $(label); 
      if($label.children().text() === "Jun") { 
       $label.css({fill: "blue"});       

      } 

     }); 

     // You also can to something like: 
     $(".highcharts-axis:first text:eq(6)").css({fill: "green"}); 

    }) 
});​ 

आशा यह आप

Answer 3

नोट है कि जब आप exporting.highcharts.com पर Highcharts सर्वर के निर्यात का उपयोग आपके ग्राफ़ का छवियों रेंडर करने के लिए, जावास्क्रिप्ट formatters निष्पादित नहीं किया जाएगा।

सौभाग्य से उच्च लेबल translates some html tags and style attributes व्यक्तिगत लेबल और शीर्षक तारों के बराबर एसवीजी स्टाइल में, लेकिन यह एचटीएमएल को पार करने के तरीके के बारे में काफी जटिल है। यह टैग को स्ट्रिप करेगा जो एकल उद्धृत विशेषताओं का उपयोग कर रहे हैं, आपको डबल कोट्स का उपयोग करने की आवश्यकता है। साथ ही, किसी अन्य टैग के अंदर <br/> टैग घोंसला नहीं करेगा।

तो अगर आप पाठ की दो पंक्तियाँ उदाहरण के लिए लाल रंग चाहते हैं, आप मिल:

<span style="color: #ff0000">First line</span> <br/> 
<span style="color: #ff0000">Second line</span> 

Answer 4

मैं एक डोनट पाइ चार्ट में dataLabels उपयोग कर रहा हूँ। मैं मूल्यों की तुलना, सशर्त तर्क के आधार पर व्यक्तिगत पाई स्लाइस के लिए लेबल टेक्स्ट रंग बदलना चाहता था।

बस साझा करना क्योंकि मेरी खोज ने मुझे यहां लाया।

data: outerData, 
dataLabels: { 
    formatter: 
     function() { 
      if ((outerData[this.point.x].y > innerData[this.point.x].y) && (this.point.x != 0)) { 
       return this.y > 0.1 ? '<span style="fill: red;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null; 
      } else { 
       return this.y > 0.1 ? '<span style="fill: #006400;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null; 
      } 
     } 
    } 

Answer 5

xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
     labels: { 
      formatter: function() { 
       if ('Jan' === this.value) { 
        return '<span style="fill: blue;">' + this.value + '</span>'; 
       } else { 
        return this.value; 
       } 
      } 
     } 
    },