javascript - Jak mogę zmienić kolory mojego wykresu górnego?

Translate

Używam wykresów górnych do tworzenia wykresów kołowych, ale mam problem z załadowaniem niestandardowego zestawu kolorów dla mojego wykresu.

Oto mój kod:

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

Mój wykres kołowy działa z tym kodem, ale używa tylko domyślnej palety kolorów.

Jak określić niestandardowy zestaw kolorów?

This question and all comments follow the "Attribution Required."

Wszystkie odpowiedzi

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

Spójrz na poniższy przykładhttp://jsfiddle.net/8QufV/

Źródło
Translate

Dla tych z Was, którzy wolą inicjalizować kolor w konfiguracjach, mogliby po prostu umieścić kolory w części plotOptions obiektu konfiguracyjnego w następujący sposób:

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

Myślę, że musisz ustawić kolory za pomocą motywu zamiast setOptions w następujący sposób:

Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
                             '#64E572', '#FF9655', '#FFF263', '#6AF9C4']});
Źródło
Translate

Aby odpowiedzieć na pytanie @Loko Web Designhttps://stackoverflow.com/a/38794379/7475250

Czy istnieje strona internetowa, na której jest napisane, czemu odpowiada każdy z „kolorów”? Wszystkie odpowiedzi tutaj pokazują coś takiego:

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

Ale co właściwie zmieniają # 333, # CB2326 itd.? Oczywiście mogę je po prostu zmienić i zobaczyć, jakie zmiany, ale fajnie byłoby mieć gdzieś tę referencję.

Dokumenty kolorów są dostępnetutaj. Chociaż pomocne, nie opisują, co właściwie robi zmiana określonego koloru. Poniżej znajduje się mój najlepszy opis.

Rekwizyt kolorów nadaje Highcharts kolory, przez które ma się zapętlać wykres. Na przykład, jeśli masz następujący rekwizyt koloru.

colors: ['blue', 'green']

Twoje plasterki ciasta będą się zmieniać na niebiesko i zielono. Zmiana koloru niebieskiego na czerwony będzie wtedy zmieniała się z czerwonego na zielony. Przetestuj to, wykonując następujące czynnościskrzypce

Rozszerzenie listy kolorów zwiększa liczbę kolorów przed powtórzeniem.

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

Powtórzyłby kolory, jeśli w zbiorze danych znajdują się więcej niż 4 wycinki.

Źródło
Translate
Highcharts.setOptions({
 colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',      '#6AF9C4']
});
Źródło
Translate

Czy istnieje strona internetowa, na której jest napisane, czemu odpowiada każdy z „kolorów”? Wszystkie odpowiedzi tutaj pokazują coś takiego:

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

Ale co właściwie zmieniają # 333, # CB2326 itd.? Oczywiście mogę je po prostu zmienić i zobaczyć, jakie zmiany, ale fajnie byłoby mieć gdzieś tę referencję.

Źródło
Translate

Miałem ten sam problem. W highcharts.css znajduje się sekcja o nazwie „Kolory domyślne”. Po usunięciu tej sekcji mogłem używać niestandardowych kolorów. W każdym razie, myślę, że nie potrzebujesz highcharts.css, jeśli używasz wersji v5.0.4 lub wyższej.

Źródło
Translate

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

Na wysokich wykresach mamy wbudowane kolory. Musisz więc zmienić ścieżkę koloru [0] lub [1] ........ [6]

Źródło
Leave a Reply
You must be logged in to post a answer.
O autorze