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

Translate

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

यहाँ मेरा कोड है:

     <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>

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

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

This question and all comments follow the "Attribution Required."

सभी उत्तर

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

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

स्रोत
Translate

आप में से जो कॉन्फिगरेशन में कलर इनिशियलाइज़ करना पसंद करते हैं, उनके लिए आप कॉनफिगरेशन के प्लॉट ऑक्शन हिस्से में कलर्स डाल सकते हैं, जैसे:

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

मुझे लगता है कि आपको क्या करने की ज़रूरत है सेट के बजाय थीम का उपयोग करके रंग सेट करें:

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

@Loko वेब डिज़ाइन के प्रश्न का उत्तर देने के लिएhttps://stackoverflow.com/a/38794379/7475250

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

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

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

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

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

colors: ['blue', 'green']

आपकी पाई स्लाइस नीले और हरे रंग के बीच वैकल्पिक होगी। नीले रंग को अपने रंगों में बदलना फिर लाल और हरे रंग के बीच वैकल्पिक करना। इसका परीक्षण निम्न के साथ करेंबेला

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

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

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

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

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

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

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

स्रोत
Translate

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

स्रोत
Translate

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

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

स्रोत
Leave a Reply
You must be logged in to post a answer.
लेखक के बारे में