चार्ट जेएस कैनवास आईई, सफारी और फ़ायरफ़ॉक्स में आरजीबीए रंग प्रदर्शित नहीं कर रहा है

Question

मैं कुछ डेटा प्रदर्शित करने के लिए चार्टजेएस का उपयोग कर रहा हूं लेकिन यह आईई, फ़ायरफ़ॉक्स और सफारी में कैनवास तत्व को सही ढंग से प्रस्तुत नहीं कर रहा है।

मेरा अनुमान है कि पृष्ठभूमि रंग संपत्ति में अन्य ब्राउज़र के लिए उपयोग किए गए उपसर्गों में से कोई भी कमी नहीं है क्योंकि यह क्रोम में ठीक काम करता है।

किसी और को यह समस्या थी?

क्रोम:

फायरफॉक्स, सफारी और IE:

कोड:

window.onload = function() { 
     var ctx = document.getElementById("canvas"); 
     var myChart = new Chart(ctx, { 
      type: 'line', 
      data: { 
       labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"], 
       datasets: [{ 
        label: '# of Value', 
        data: [12, 19, 3, 5, 2, 3, 10, 29], 
        backgroundColor: [ 
         'rgba(33, 145, 81, 0.2)', 
         'rgba(33, 145, 81, 0.2)', 
         'rgba(33, 145, 81, 0.2)', 
         'rgba(33, 145, 81, 0.2)', 
         'rgba(33, 145, 81, 0.2)', 
         'rgba(33, 145, 81, 0.2)', 
         'rgba(33, 145, 81, 0.2)', 
         'rgba(33, 145, 81, 0.2)' 
        ], 
        borderColor: [ 
         'rgba(33, 145, 81, 1)', 
         'rgba(33, 145, 81, 0.2)', 
         'rgba(33, 145, 81, 0.2)', 
         'rgba(33, 145, 81, 0.2)', 
         'rgba(33, 145, 81, 0.2)', 
         'rgba(33, 145, 81, 0.2)', 
         'rgba(33, 145, 81, 0.2)', 
         'rgba(33, 145, 81, 0.2)' 
        ], 
        borderWidth: 1 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true 
         } 
        }] 
       } 
      } 
     }); 
    }; 
    }); 

Answer 1

समस्या यह है कि आप दे रहे है backgroundColor एक के बजाय Color की एक सरणी संपत्ति।

fill संपत्ति के साथ लाइन चार्ट true पर सेट किया गया केवल Color होना चाहिए, अन्यथा यह आपके चार्ट पर ऐसा ही टूट जाएगा।

---

तो आप बस से बदलने की जरूरत है:

backgroundColor: [ 
    'rgba(33, 145, 81, 0.2)', 
    'rgba(33, 145, 81, 0.2)', 
    'rgba(33, 145, 81, 0.2)', 
    'rgba(33, 145, 81, 0.2)', 
    'rgba(33, 145, 81, 0.2)', 
    'rgba(33, 145, 81, 0.2)', 
    'rgba(33, 145, 81, 0.2)', 
    'rgba(33, 145, 81, 0.2)' 
], 

करने के लिए:

backgroundColor: 'rgba(33, 145, 81, 0.2)', 

और यह आप this result जो कुछ भी ब्राउज़र का उपयोग कर रहे हैं दे देंगे।