मैं अपने हाईचार्ट्स पाइचर्ट के रंग कैसे बदल सकता हूं?

Question

मैं एक पाइचर्ट बनाने के लिए हाईचार्ट्स का उपयोग कर रहा हूं लेकिन मुझे अपने चार्ट के लिए कस्टम रंग सेट लोड करने में परेशानी हो रही है।

 <script type="text/javascript"> 
    $(function() { 
    Highcharts.setOptions({ 
    colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',  '#6AF9C4'] 
    }); 
    return new Highcharts.Chart({ 


     chart: { 
      renderTo: 'trailpiechart', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      backgroundColor: "#f8f8f8", 
      margin: [20, 20, 20, 20] 
     }, 


     credits: { 
      enabled: false 
     }, 

     title: { 
      text: caption 
     }, 
     tooltip: { 
      formatter: function() { 
       return this.y + ' links'; 
      } 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: false 
       }, 
       showInLegend: true 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      floating: false, 
      borderRadius: 0, 
      borderWidth: 0 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: data 
     }] 
    }); 
    }); 
</script> 

मेरे पाई चार्ट इस कोड के साथ काम करता है लेकिन यह केवल डिफ़ॉल्ट रंग पैलेट का उपयोग करता है:

यहाँ मेरी कोड है।

आप एक कस्टम रंग सेट कैसे निर्दिष्ट करते हैं?

Answer 1

Highcharts.setOptions({ 
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] 
}); 

निम्न उदाहरण http://jsfiddle.net/8QufV/

Answer 2

मुझे लगता है कि तुम क्या करने setOptions के बजाय विषय का उपयोग कर रंग स्थापित करना है क्या इस प्रकार है:

Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
          '#64E572', '#FF9655', '#FFF263', '#6AF9C4']}); 

Answer 3

Highcharts.setOptions({ 
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',  '#6AF9C4'] 
}); 

Answer 4

देखो वहाँ एक वेबपेज है जो कहता है कि "रंग" में से प्रत्येक क्या मेल खाता है? यहां दिए गए सभी उत्तर इस तरह कुछ दिखाते हैं:

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4'] 

लेकिन # 333, # सीबी 2326 आदि वास्तव में क्या बदलते हैं? जाहिर है, मैं बस उन्हें बदल सकता हूं और क्या परिवर्तन देख सकता हूं, लेकिन यह संदर्भ कहीं भी उपलब्ध होना अच्छा लगेगा।

Answer 5

मुझे एक ही समस्या थी। Highcharts.css में "डिफ़ॉल्ट रंग" नामक एक अनुभाग है। इस खंड को हटाने के बाद, मैं कस्टम रंगों का उपयोग कर सकता था। वैसे भी, मुझे लगता है कि यदि आप संस्करण v5.0.4 या उच्चतर संस्करण का उपयोग करते हैं तो आपको highcharts.css की आवश्यकता नहीं है।

Answer 6

Highcharts.Color (Highcharts.getOptions()। रंग [0])। SetOpacity (0.5) .Get ('RGBA')]

उच्च चार्ट इनबिल्ट रंग हमारे पास हैं। तो आपको रंग [0] या [1] ........ [6] के पथ को बदलने की जरूरत है

Answer 7

आप में से जो कि कॉन्फ़िगरेशन में रंग को प्रारंभ करने के लिए पसंद के लिए, आप बस रंग config वस्तु की plotOptions हिस्से में इतनी तरह डाल सकता है:

..., 
plotOptions: { 
    pie: { 
    colors: [ 
    '#50B432', 
    '#ED561B', 
    '#DDDF00', 
    '#24CBE5', 
    '#64E572', 
    '#FF9655', 
    '#FFF263', 
    '#6AF9C4' 
    ], 
    allowPointSelect: true, 
    cursor: 'pointer', 
    dataLabels: { 
    enabled: false 
    }, 
    showInLegend: true 
} 
}, 
... 

Answer 8

@Loko वेब डिजाइन के सवाल का जवाब करने के लिए https://stackoverflow.com/a/38794379/7475250

क्या कोई वेबपृष्ठ है जो कहता है कि "रंग" में से प्रत्येक क्या मेल खाता है? यहां दिए गए सभी उत्तर इस तरह कुछ दिखाते हैं:

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4'] 

लेकिन # 333, # सीबी 2326 आदि वास्तव में क्या बदलते हैं? जाहिर है, मैं सिर्फ बदल सकता हूं और क्या परिवर्तन देख सकता हूं, लेकिन यह संदर्भ कहीं भी उपलब्ध होना अच्छा लगेगा।

रंग दस्तावेज़ here उपलब्ध हैं। हालांकि सहायक वे वर्णन नहीं करते कि वास्तव में एक विशिष्ट रंग बदलने से क्या होता है। नीचे मेरा सबसे अच्छा विवरण है।

रंग प्रोप हाईचर को उन रंगों को देता है जिन्हें आप चार्ट को लूप करना चाहते हैं। उदाहरण के लिए यदि आपके पास निम्न रंग प्रोप था।

colors: ['blue', 'green'] 

आपकी पाई स्लाइस नीली और हरे रंग के बीच वैकल्पिक होगी। अपने रंगों को लाल रंग में बदलना लाल और हरे रंग के बीच वैकल्पिक होगा। निम्नलिखित fiddle

रंग सूची का विस्तार करने से पहले रंगों की संख्या बढ़ जाती है।

colors: ['blue', 'green', 'yellow'] 

यदि आपके डेटासेट में 4 से अधिक स्लाइस हैं तो रंग दोहराएंगे।