चार्ट.जेएस 2.x में स्वचालित रंग असाइनमेंट अब काम नहीं करता है, v. 1.x

में काम करने के लिए प्रयुक्त होता है चार्ट.जेएस 1.x का उपयोग करके मैं एक पाई चार्ट बना सकता हूं और रंग स्वचालित रूप से असाइन कर सकता हूं:चार्ट.जेएस 2.x में स्वचालित रंग असाइनमेंट अब काम नहीं करता है, v. 1.x

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script> 
<body> 
<canvas id="myChart" width="400" height="400"></canvas> 
<script> 
var ctx = document.getElementById("myChart").getContext("2d"); 
var data = [{"label":"Conservative","value":"5"},{"label":"Democratic","value":"6"}]; 
var myChart = new Chart(ctx).Pie(data); 
</script> 
</body>

अगर मैं वी 2.x

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script> 
<body> 
<canvas id="myChart" width="400" height="400"></canvas> 
<script> 
var ctx = document.getElementById("myChart").getContext("2d");{"label":"Democratic","value":"6"}]; 
var myChart = new Chart(ctx, { 
    type: 'pie', 
    data: { 
     labels: ["Conservative", "Democratic"], 
     datasets: [{ 
      data: [5, 15], 
     }] 
    } 
}); 
</script> 
</body>

पूरे पाई जब तक कि मैं रंग मैन्युअल रूप से निर्दिष्ट ग्रे में प्रदर्शित किया जाता है साथ भी ऐसा ही; क्या मैं कुछ भूल रहा हूँ? मुझे मिला एकमात्र संबंधित प्रश्न यह है: Random fill colors in Chart.js हालांकि, जैसा ऊपर बताया गया है, यह पूरी तरह से 1.x पर काम करता है, इसलिए यह मेरे लिए अजीब लगता है कि यह अब और काम नहीं करता है।

स्रोत

2016-10-05 Eugenio

मेरा मानना है कि रंग योजनाओं का निर्माण स्वयं का एक संपूर्ण विज्ञान है। यह मुझे समझ में आता है कि ऐसा कुछ चार्ट.जेएस से बाहर कर दिया गया है, क्योंकि आगे बढ़ने के लिए और अधिक महत्वपूर्ण लक्ष्य हैं। docs में चार्ट उदाहरणों में उपयोग किए गए सभी रंग स्पष्ट रूप से परिभाषित किए गए हैं। और this two-month-old issue चार्ट.जेएस सदस्य से एक स्पष्ट प्रतिक्रिया प्रदान करता है कि डिफ़ॉल्ट रंग चार्ट.जेएस 2 में उपलब्ध नहीं हैं। इसलिए, आपके पास तीन विकल्प हैं। पहली पसंद कुछ रंग खुद को बनाना है। मुझे लगता है कि आपने सवाल नहीं पूछा होगा, क्या आप ऐसा कुछ कर रहे थे (मुझे पता है कि परिणाम भयानक होंगे, अगर I ऐसा कुछ किया था)। दूसरी पसंद रंग योजनाओं और रंग योजना जेनरेटर ऑनलाइन देखने और कुछ रंग योजनाओं को चुनना है जो आपको खुश करते हैं। तीसरी और रोचक पसंद एक जावास्क्रिप्ट लाइब्रेरी की तलाश है जो इच्छानुसार रंग योजनाएं उत्पन्न कर सकती है। कुछ वैकल्पिक विकल्प हैं। एक अच्छा, जो बहुत अनुमोदित लाइसेंसिंग के तहत उपलब्ध है, Colour Palette Generator है। आप इसे Chart.js 2 here के साथ कार्रवाई में देख सकते हैं। नमूना नीचे भी उपलब्ध है:

var ctx = document.getElementById("myChart"); 
 
var myData = [12, 19, 3, 5, 2, 3]; 
 
var myChart = new Chart(ctx, { 
 
    type: 'pie', 
 
    data: { 
 
    labels: ["First", "Second", "Third", "Fourth", "Fifth", "Sixth"], 
 
    datasets: [{ 
 
     label: '# of Votes', 
 
     data: myData, 
 
     backgroundColor: palette('tol', myData.length).map(function(hex) { 
 
     return '#' + hex; 
 
     }) 
 
    }] 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script> 
 
<!-- This is a copy of palette.js --> 
 
<script src="https://codepen.io/anon/pen/aWapBE.js"></script> 
 
<canvas id="myChart" width="400" height="400"></canvas>

का उपयोग कैसे करें पुस्तकालय वर्णन किया गया है here। संक्षेप में, आप निम्न का उपयोग कर एक विशिष्ट रंग योजना से 10 रंग पैलेट बना सकते हैं:

var seq = palette('tol-sq', 10);

परिणाम हेक्स तार (उदाहरण के लिए "eee8d5") की एक सरणी है। इसका उपयोग करने के लिए जहां Chart.js रंगों की अपेक्षा कर रहा है, आप ऊपर दिए गए उदाहरण में प्रत्येक स्ट्रिंग में "#" प्रीपेड करने के लिए map का उपयोग कर सकते हैं।

स्रोत

2016-10-05 22:29:31 xnakos

बहुत ही सरल डिफ़ॉल्ट पैलेट को हटाने से मुझे अजीब लगता है (मैंने v1 में संबंधित कोड देखा और यह बहुत आसान था) लेकिन वह विकल्प था और आपका समाधान बहुत अच्छा काम करता है, धन्यवाद! – Eugenio

@Eugenio एक संस्करण से दूसरे संस्करण में जाने के दौरान, कार्यक्षमता गायब हो सकती है। लेकिन चार्ट और प्लगइन्स वास्तव में अच्छी तरह से काम करते हैं, इसलिए एक बाहरी पैलेट एक उपद्रव का अधिक नहीं है। :) – xnakos

चार्ट.जेएस 2.x में स्वचालित रंग असाइनमेंट अब काम नहीं करता है, v. 1.x

उत्तर

संबंधित मुद्दे