Chart.js बार चार्ट

Question

दस्तावेज़ में डिफ़ॉल्ट दृश्य शैली बार चार्ट के बारे में थोड़ा उदाहरण देता है:

var data = { 
    labels : ["January","February","March","April","May","June","July"], 
    datasets : [ 
     { 
      fillColor : "rgba(220,220,220,0.5)", 
      strokeColor : "rgba(220,220,220,1)", 
      data : [65,59,90,81,56,55,40] 
     }, 
     { 
      fillColor : "rgba(151,187,205,0.5)", 
      strokeColor : "rgba(151,187,205,1)", 
      data : [28,48,40,19,96,27,100] 
     } 
    ] 
} 

और फिर new Chart(ctx).Bar(data);

क्या यह संभव है का उपयोग कर दृश्य को परिभाषित करने के चार्ट बनाने के लिए अलग से डेटा यानी fillColor और strokeColor परिभाषित करें कहीं और datadatasets ऑब्जेक्ट्स में छोड़कर कहीं और? मान लें कि मैं डेटासेट में केवल एक सेट चाहता हूं।

मैं बैक एंड में डेटा (लेबल और मान) उत्पन्न करना चाहता हूं, और दृश्य विवरण को फ्रंट-एंड पर छोड़ना चाहता हूं।

आधिकारिक विकल्प इसकी अपेक्षा नहीं करते हैं।

---

डॉक्टर: http://www.chartjs.org/docs/#barChart

Answer 1

आप chartjs में सही हैं, उन विकल्पों को वैश्विक विकल्पों के रूप में समर्थन नहीं करते हैं।

सौभाग्य से, त्वरित सुधार आप सहित केवल परिवर्तन स्रोत लाइनों के लिए, उदाहरण के लिए की आवश्यकता होगी ...

data.datasets[i].fillColor 

... करने के लिए:

config.fillColor || data.datasets[i].fillColor 

... कुछ इसी तरह है, जिसके परिणामस्वरूप प्रति:

ctx.fillStyle = config.fillColor || data.datasets[i].fillColor; 

यह strokeColor पर लागू होता है।

फिर आप या तो fillColor संपत्ति को वैश्विक कॉन्फ़िगरेशन में जोड़ सकते हैं या इसे डेटासेट में शामिल कर सकते हैं।

Answer 2

साथ ही आप सर्वर पर ChartJS 'विकल्पों के आधार पर विकल्पों की गणना कर सकता है, अगर needbe और

new Chart(ctx).Bar(data,options); 

तरह के पास है कि एक पैरामीटर के रूप में

new Chart(ctx).Bar(data,{fillColor : "rgba(151,187,205,0.5)", strokeColor :"rgba(151,187,205,1)",}); 

क्योंकि ChartJS

function mergeChartConfig(defaults,userDefined){ 
    var returnObj = {}; 
    for (var attrname in defaults) { returnObj[attrname] = defaults[attrname]; } 
    for (var attrname in userDefined) { returnObj[attrname] = userDefined[attrname]; } 
    return returnObj; 
} 

में विकल्पों में से किसी मर्ज करता है आप पाएंगे कि आप प्रभाव आप चाहते हैं देने के लिए संपादित कर सकते हैं! https://github.com/nnnick/Chart.js/blob/master/Chart.js