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

Ich verwende Highcharts, um ein Kreisdiagramm zu erstellen, aber ich habe Probleme beim Laden eines benutzerdefinierten Farbsatzes für mein Diagramm.Wie kann ich die Farben meines Highcharts-Kreisdiagramms ändern?

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 mit diesem Code funktioniert, aber es nutzt nur die Standardfarbpalette.

Wie legen Sie eine benutzerdefinierte Farbpalette fest?

Quelle

2012-04-04 Sreenath Plakkat

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

Schauen Sie das folgende Beispiel http://jsfiddle.net/8QufV/

Quelle

2012-04-09 14:30:05

Ich habe dies versucht, aber meine Farbe der Legende werden geändert, aber die Kreisdiagramm Farbe ändert sich nicht. – Rohitesh

Ich denke, was Sie tun müssen, festgelegt ist, die Farben mit Thema statt setOptions wie folgt:

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

Quelle

2012-04-04 13:35:22 Linger

Wenn Sie zu [Tortendiagramm-Demo] (http://www.highcharts.com/demo/pie-basic/grid) gehen und dann auf "View visual theme" klicken, sehen Sie, wie Sie das gesamte Theme bearbeiten können. – Linger

hi Todd Farbe ändert sich nicht mit dem obigen Code. Immer noch zeigt die Standardfarben des Tortendiagramms –

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

Quelle

2013-07-30 18:12:01 min2bro

Gibt es eine Webseite das sagt zu was jeder der "Farben" entspricht? Alle Antworten hier zeigen etwas wie:

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

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

Quelle

2016-08-05 16:59:21

Ich hatte das gleiche Problem. In highcharts.css gibt es einen Abschnitt namens "Standardfarben". Nachdem ich diesen Abschnitt gelöscht habe, konnte ich benutzerdefinierte Farben verwenden. Wie auch immer, ich denke, dass Sie highcharts.css nicht benötigen, wenn Sie die Version v5.0.4 oder höher verwenden.

Quelle

2016-11-25 11:23:55 bugovicsb

Highcharts.Color (Highcharts.getOptions(). Farben [0]). SetOpacity (0,5) .get ('rgba')]

In hohen Charts eingebaute Farben, die wir haben. Du musst also den Weg der Farbe [0] oder [1] ....... ändern. [6]

Quelle

2017-02-10 12:51:06 Kondal

Für diejenigen unter Ihnen, die die Farbe in den configs zu initialisieren bevorzugen, können Sie die Farben im plotOptions Teil des Objektkonfigurations einfach gesagt wie folgt:

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

Quelle

2017-05-01 00:00:43

@Loko Web Design Frage zu beantworten https://stackoverflow.com/a/38794379/7475250

Gibt es eine Webseite, auf der steht, was jeder der "Farben" entspricht? Alle Antworten hier zeigen etwas wie:
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4'] 
Aber was ändern # 333, # CB2326, etc. tatsächlich? Offensichtlich kann ich nur ändern sie und sehen, was sich ändert, aber es wäre schön, diese Referenz irgendwo verfügbar zu haben.

Die Farbdokumente sind verfügbar here. Obwohl hilfreich, beschreiben sie nicht, was eine bestimmte Farbe tatsächlich verändert. Unten ist meine beste Beschreibung.

Die Farben Prop gibt Highcharts die Farben, die Sie möchten, dass das Diagramm durchlaufen. Zum Beispiel, wenn du die folgende Farbrequisite hättest.

colors: ['blue', 'green']

Ihre Kuchenscheiben würden abwechselnd blau und grün sein. Wenn Sie Blau zu Rot wechseln, wechseln Ihre Farben zwischen Rot und Grün. Testen Sie es mit den folgenden fiddle

Erweiterung der Farbliste erhöht die Anzahl der Farben vor der Wiederholung.

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

Wiederholen Sie die Farben, wenn mehr als 4 Slices in Ihrem Dataset sind.

Quelle

2017-09-26 19:28:05 BJax

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

Antwort

Verwandte Themen