Standard visueller Stil in Chart.js Balkendiagramm

Question

Der Doc gibt ein kleines Beispiel über Balkendiagramm:

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

und dann das Diagramm new Chart(ctx).Bar(data);

mit zu schaffen, ist es möglich, die Ansicht definieren getrennt von der Daten dh definieren fillColor und strokeColor woanders nur data in datasets Objekte verlassen? Angenommen, ich möchte nur einen Satz in Datensätzen.

Ich möchte die Daten (Beschriftungen und Werte) im Back-End generieren und die Ansichtsdetails an das Front-End belassen.

Die offiziellen Optionen erwarten dies nicht.

---

Doc: http://www.chartjs.org/docs/#barChart

Answer 1

Sie haben Recht, dass chartjs diese Eigenschaften nicht als globale Optionen unterstützt.

Glücklicherweise eine schnelle Lösung würden Sie nur ändern Quellenleitungen einschließlich erfordern ...

data.datasets[i].fillColor 

... auf, zum Beispiel:

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

... was etwas ähnliches zu:

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

Das gleiche gilt für strokeColor.

Dann können Sie entweder eine fillColor-Eigenschaft zur globalen Konfiguration hinzufügen oder sie in Datasets einschließen.

Answer 2

Sie Optionen ChartJS‘Optionen auf dem Server als auch auf der Basis von wenn needbe und passieren, dass als Parameter an

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

wie

berechnen kann

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

weil ChartJS eine Zusammenführung von Optionen in

tut

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

können Sie bearbeiten, dass Sie geben den gewünschten Effekt! https://github.com/nnnick/Chart.js/blob/master/Chart.js