मैं एक पीचर्ट बनाने के लिए हाईचर्ट्स का उपयोग कर रहा हूं, लेकिन मुझे अपने चार्ट के लिए कस्टम रंग सेट करने में परेशानी हो रही है।
यहाँ मेरा कोड है:
<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>
मेरा पाई चार्ट इस कोड के साथ काम करता है लेकिन यह केवल डिफ़ॉल्ट रंग पैलेट का उपयोग करता है।
आप एक कस्टम रंग सेट कैसे निर्दिष्ट करते हैं?
सभी उत्तर
निम्न उदाहरण देखेंhttp://jsfiddle.net/8QufV/
आप में से जो कॉन्फिगरेशन में कलर इनिशियलाइज़ करना पसंद करते हैं, उनके लिए आप कॉनफिगरेशन के प्लॉट ऑक्शन हिस्से में कलर्स डाल सकते हैं, जैसे:
मुझे लगता है कि आपको क्या करने की ज़रूरत है सेट के बजाय थीम का उपयोग करके रंग सेट करें:
@Loko वेब डिज़ाइन के प्रश्न का उत्तर देने के लिएhttps://stackoverflow.com/a/38794379/7475250
रंग डॉक्स उपलब्ध हैंयहाँ। हालांकि सहायक वे यह नहीं बताते हैं कि एक विशिष्ट रंग वास्तव में क्या बदलता है। नीचे मेरा सबसे अच्छा वर्णन है।
रंग प्रोप हाइचरट्स को उन रंगों को देता है जिन्हें आप चार्ट के माध्यम से लूप में लाना चाहते हैं। उदाहरण के लिए यदि आपके पास निम्न रंग का प्रस्ताव था।
आपकी पाई स्लाइस नीले और हरे रंग के बीच वैकल्पिक होगी। नीले रंग को अपने रंगों में बदलना फिर लाल और हरे रंग के बीच वैकल्पिक करना। इसका परीक्षण निम्न के साथ करेंबेला
रंग सूची के विस्तार से दोहराए जाने से पहले रंगों की संख्या बढ़ जाती है।
यदि आपके डेटासेट में 4 से अधिक स्लाइस हैं, तो रंग दोहराएंगे।
क्या कोई वेबपृष्ठ है जो कहता है कि "रंग" में से प्रत्येक किस से मेल खाता है? यहाँ सभी जवाब कुछ इस तरह दिखाते हैं:
लेकिन वास्तव में # 333, # CB2326 आदि क्या बदलते हैं? जाहिर है मैं सिर्फ उन्हें बदल सकता हूं और देख सकता हूं कि क्या बदलाव होता है, लेकिन अच्छा होगा कि यह संदर्भ कहीं उपलब्ध हो।
मुझे भी यही समस्या थी। Highcharts.css में "डिफ़ॉल्ट रंग" नामक एक अनुभाग है। जब मैंने इस अनुभाग को हटा दिया, तब मैं कस्टम रंगों का उपयोग कर सकता था। वैसे भी, मुझे लगता है कि अगर आपको संस्करण v5.0.4 या उच्चतर का उपयोग करना है तो आपको highcharts.css की आवश्यकता नहीं है।
Highcharts.Color (Highcharts.getOptions ()। रंग [0])। SetOpacity (0.5) .get ('rgba')]।
उच्च चार्ट में हमारे पास इनबिल्ट रंग हैं। इसलिए आपको रंग के पथ को बदलने की आवश्यकता है [0] या [1] ........ [6]
Leave a Reply