2017-02-21 4 views
1

Diese Frage bezieht sich auf eckige-chartjs 1.1.1.angular-chartJs chart chart background und highlight colours

Zuerst wollte ich die Hover-Farbe in Diagrammen deaktivieren. Ich habe bereits die folgenden Optionen auf false:

tooltips: { 
    enabled: false 
}, 
hover: { 
    enabled: false 
}, 

Das funktioniert nicht, so habe ich beschlossen, die Farben meines Ringdiagramm zu ändern, einschließlich der highlightColor. Um die Farben einzustellen, habe ich die Direktive chart-colors="colors" zu meiner Leinwand hinzugefügt. Zu meinem Umfang habe ich folgendes:

$scope.colors = [{ 
    fill: true, 
    backgroundColor: ["#FF6384","#36A2EB"] 
}] 

Ich habe auch versucht die folgenden:

$scope.colors = [{ 
    fill: true, 
    backgroundColor: "#FF6384" 
},{ 
    fill: true, 
    backgroundColor: "#36A2EB" 
}] 

Beide Code-Schnipsel nicht berufstätig sind. Sie drehen mein Diagramm nur teilweise in Grau, aber nicht in die angegebenen Farben. Nur der folgende Code meine Diagrammfarben geändert:

$scope.colors = ["#FF6384","#36A2EB"] 

Dies wird nur die backgroundColor ändern, aber ich will auch die highlightColor ändern, so dass diese Lösung ist keine Option für mich. Hat jemand eine Idee wie ich die backgroundColor und die hightlightColor des Chart einstellen kann?

Antwort

1

ich eine Lösung gefunden definieren würden. Es scheint, dass ich genau diese Formulierung verwenden:

colors: [{ 
    backgroundColor: '#FF6384', 
    pointBackgroundColor: '#FF6384' 
}, { 
    backgroundColor: '#36A2EB', 
    pointBackgroundColor: '#36A2EB' 
}], 

So ist die pointBackgroundColor würde die Diagrammfarbe ändert nicht die Backgroundcolor selbst. Die backgroundColor wird für den Hover-Effekt benötigt, daher ist das pointedBackground unsichtbar und der Hintergrund kommt nach vorne.

Danke an @Dominik Heim, Ihr Link war eine große Hilfe!

1

können Sie den vollständigen Code bereitstellen? Wäre es leichter für eine qualifizierte Antwort.

Auf der Grundlage dieser https://stackoverflow.com/a/28654829/6629704 Ich gehe davon aus, dass Sie möglicherweise zwei weitere Farben Array hinzufügen sollten, da vielleicht die 3. und 4. Position der Array Highlight Farben