webentwicklung-frage-antwort-db.com.de

Wie kann ich die Farben meines Highcharts-Kreisdiagramms ändern?

Ich verwende Highcharts, um ein Tortendiagramm zu erstellen, aber ich habe Probleme beim Laden eines benutzerdefinierten Farbsatzes für mein Diagramm.

Hier ist mein Code: 

     <script type="text/javascript">
     $(function () {
     Highcharts.setOptions({
     colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4']
    });
    return new Highcharts.Chart({


        chart: {
            renderTo: 'trailpiechart',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor: "#f8f8f8",
            margin: [20, 20, 20, 20]
        },


        credits: {
            enabled: false
        },

        title: {
            text: caption
        },
        tooltip: {
            formatter: function () {
                return this.y + ' links';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        legend: {
            layout: 'vertical',
            floating: false,
            borderRadius: 0,
            borderWidth: 0
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: data
        }]
    });
    });
</script>

Mein Kreisdiagramm funktioniert mit diesem Code, verwendet jedoch nur die Standardfarbpalette.

Wie legen Sie einen benutzerdefinierten Farbsatz fest?

45
Highcharts.setOptions({
 colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});

Siehe folgendes Beispiel http://jsfiddle.net/8QufV/

Ich denke, Sie müssen die Farben mit dem Thema anstelle von setOptions wie folgt einstellen:

Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
                             '#64E572', '#FF9655', '#FFF263', '#6AF9C4']});
7
Linger

Für diejenigen, die die Farbe lieber in den configs initialisieren möchten, können Sie die Farben einfach in den plotOptions-Teil des config-Objekts einfügen:

...,
plotOptions: {
  pie: {
   colors: [
     '#50B432', 
     '#ED561B', 
     '#DDDF00', 
     '#24CBE5', 
     '#64E572', 
     '#FF9655', 
     '#FFF263', 
     '#6AF9C4'
   ],
   allowPointSelect: true,
   cursor: 'pointer',
   dataLabels: {
     enabled: false
   },
   showInLegend: true
 }
},
...
6
Ali Yazdani

Beantworten Sie die Frage von @Loko Web Design https://stackoverflow.com/a/38794379/7475250

Gibt es eine Webseite, auf der steht, was jeder der "Farben" entspricht? Alle Antworten hier zeigen so etwas wie:

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']

Aber was ändern sich # 333, # CB2326 usw. tatsächlich? Natürlich kann ich einfach Ändern Sie sie und sehen Sie, was sich ändert, aber es wäre schön, wenn Sie diese Referenz irgendwo verfügbar.

Die Farbdokumente stehen zur Verfügung hier . Obwohl hilfreich, beschreiben sie nicht, was eine bestimmte Farbe tatsächlich bewirkt. Unten ist meine beste Beschreibung. 

Die Farbstütze gibt Highcharts die Farben, die das Diagramm durchlaufen soll. Zum Beispiel, wenn Sie die folgende Farbstütze hatten.

colors: ['blue', 'green']

Ihre Tortenstücke würden zwischen blau und grün wechseln. Wenn Sie die Farben von Blau zu Rot ändern, wechseln Sie zwischen Rot und Grün. Testen Sie es mit der folgenden Geige

Durch Erweitern der Farbliste wird die Anzahl der Farben vor der Wiederholung erhöht. 

colors: ['blue', 'green', 'yellow']

Wiederholt die Farben, wenn sich mehr als 4 Scheiben in Ihrem Datensatz befinden. 

2
BJax
Highcharts.setOptions({
 colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',      '#6AF9C4']
});
1
min2bro

Gibt es eine Webseite, auf der steht, was jeder der "Farben" entspricht? Alle Antworten hier zeigen so etwas wie:

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']

Aber was ändern sich # 333, # CB2326 usw. tatsächlich? Natürlich kann ich sie einfach ändern und sehen, was geändert wird, aber es wäre schön, wenn diese Referenz irgendwo verfügbar wäre.

1
Loko Web Design

Ich hatte das gleiche Problem. In highcharts.css gibt es einen Abschnitt mit dem Namen "Standardfarben". Nachdem ich diesen Abschnitt gelöscht habe, könnte ich benutzerdefinierte Farben verwenden. Ich denke jedoch, dass Sie highcharts.css nicht benötigen, wenn Sie Version v5.0.4 oder höher verwenden.

0
bugovicsb

Highcharts.Color (Highcharts.getOptions (). Colors [0]). SetOpacity (0.5) .get ('rgba')]

In hohen Charts eingebaute Farben haben wir. Sie müssen also den Pfad der Farbe [0] oder [1] ändern. [6]

0
Kondal