javascript - Jak mohu změnit barvy svého highcharts piechartu?

Translate

Používám highcharts k vytvoření piechartu, ale mám potíže s načítáním vlastní sady barev pro můj graf.

Tady je můj kód:

     <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 výsečový graf funguje s tímto kódem, ale používá pouze výchozí barevnou paletu.

Jak určíte vlastní sadu barev?

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

Všechny odpovědi

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

Podívejte se na následující příkladhttp://jsfiddle.net/8QufV/

Zdroj
Translate

Pro ty z vás, kteří dávají přednost inicializaci barev v konfiguracích, můžete jednoduše dát barvy do části plotOptions v konfiguračním objektu takto:

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

Myslím, že musíte nastavit barvy pomocí motivu namísto setOptions takto:

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

Chcete-li odpovědět na otázku @Loko Web Designhttps://stackoverflow.com/a/38794379/7475250

Existuje webová stránka, která říká, čemu odpovídá každá z „barev“? Všechny odpovědi zde ukazují něco jako:

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

Ale co se vlastně mění # 333, # CB2326 atd.? Je zřejmé, že je mohu jen změnit a zjistit, jaké změny, ale bylo by hezké mít někde k dispozici tuto referenci.

Barevné dokumenty jsou k dispozicitady. Ačkoli jsou užitečné, nepopisují, co změna konkrétní barvy ve skutečnosti dělá. Níže je můj nejlepší popis.

Podpěra barev dává Highcharts barvy, které chcete, aby graf procházel. Například pokud jste měli následující barevnou podpěru.

colors: ['blue', 'green']

Vaše výseče koláče by se střídaly mezi modrou a zelenou. Pokud změníte modrou barvu na červenou, barvy se budou střídat mezi červenou a zelenou. Vyzkoušejte to následujícím způsobemhousle

Rozšiřování seznamu barev zvyšuje počet barev před opakováním.

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

Opakoval by barvy, pokud jsou ve vaší datové sadě více než 4 řezy.

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

Existuje webová stránka, která říká, čemu odpovídá každá z „barev“? Všechny odpovědi zde ukazují něco jako:

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

Ale co se vlastně mění # 333, # CB2326 atd.? Je zřejmé, že je mohu jen změnit a zjistit, jaké změny, ale bylo by hezké mít někde k dispozici tuto referenci.

Zdroj
Translate

Měl jsem stejný problém. V highcharts.css je sekce s názvem "Výchozí barvy". Poté, co jsem odstranil tuto sekci, jsem mohl použít vlastní barvy. Každopádně myslím, že nepotřebujete highcharts.css, pokud používáte verzi v5.0.4 nebo vyšší.

Zdroj
Translate

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

Ve vysokých grafech máme vestavěné barvy. Musíte tedy změnit cestu barvy [0] nebo [1] ........ [6]

Zdroj
Leave a Reply
You must be logged in to post a answer.
O autorovi