javascript - Как мога да променя цветовете на моята пичартка с висока класа?

Translate

Използвам високи диаграми, за да направя кръгова диаграма, но имам проблеми с зареждането на персонализиран набор от цветове за моята диаграма.

Ето моя код:

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

Моята кръгова диаграма работи с този код, но използва само цветната палета по подразбиране.

Как определяте персонализиран набор от цветове?

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

Всички отговори

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

Вижте следния примерhttp://jsfiddle.net/8QufV/

източник
Translate

За тези от вас, които предпочитат да инициализират цвета в конфигурациите, можете просто да поставите цветовете в частта plotOptions на обекта за конфигуриране по следния начин:

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

Мисля, че това, което трябва да направите, е да зададете цветовете, като използвате тема вместо setOptions, както следва:

Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
                             '#64E572', '#FF9655', '#FFF263', '#6AF9C4']});
източник
Translate

За да отговорите на въпроса на @Loko Web Designhttps://stackoverflow.com/a/38794379/7475250

Има ли уеб страница, която казва на какво съответства всеки от "цветовете"? Всички отговори тук показват нещо като:

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

Но какво всъщност се променят # 333, # CB2326 и т.н.? Очевидно мога просто да ги променя и да видя какви промени, но би било хубаво тази справка да е налична някъде.

Налични са цветните документитук. Въпреки че са полезни, те не описват какво всъщност прави промяната на определен цвят. По-долу е най-доброто ми описание.

Опцията за цветове дава на Highcharts цветовете, през които бихте искали диаграмата да премине. Например, ако сте имали следния цветен проп.

colors: ['blue', 'green']

Вашите филийки пай биха се редували между синьо и зелено. Промяната на синьото в червено вашите цветове ще се редуват между червено и зелено. Тествайте го със следнотоцигулка

Разширяването на списъка с цветове увеличава броя на цветовете преди повторение.

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

Ще повтори цветовете, ако във вашия набор от данни са повече от 4 среза.

източник
Translate
Highcharts.setOptions({
 colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',      '#6AF9C4']
});
източник
Translate

Има ли уеб страница, която казва на какво съответства всеки от "цветовете"? Всички отговори тук показват нещо като:

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

Но какво всъщност се променят # 333, # CB2326 и т.н.? Очевидно мога просто да ги променя и да видя какви промени, но би било хубаво тази справка да е налична някъде.

източник
Translate

Имах същия проблем. В highcharts.css има раздел, наречен "Цветове по подразбиране". След като изтрих този раздел, можех да използвам персонализирани цветове. Както и да е, предполагам, че не се нуждаете от highcharts.css, ако използвате версия v5.0.4 или по-нова.

източник
Translate

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

Във високи диаграми имаме вградени цветове. Така че трябва да промените пътя на цвета [0] или [1] ........ [6]

източник
Leave a Reply
You must be logged in to post a answer.
За автора