javascript - Como posso alterar as cores do gráfico de partes do gráfico superior?

Translate

Estou usando highcharts para fazer um gráfico de partes, mas estou tendo problemas para carregar um conjunto de cores personalizadas para meu gráfico.

Aqui está o meu código:

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

Meu gráfico de pizza funciona com este código, mas usa apenas a paleta de cores padrão.

Como você especifica um conjunto de cores personalizadas?

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

Todas as respostas

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

Veja o seguinte exemplohttp://jsfiddle.net/8QufV/

Fonte
Translate

Para aqueles que preferem inicializar a cor nas configurações, você pode simplesmente colocar as cores na parte plotOptions do objeto de configuração da seguinte maneira:

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

Acho que o que você precisa fazer é definir as cores usando theme em vez de setOptions da seguinte maneira:

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

Para responder à pergunta da @Loko Web Designhttps://stackoverflow.com/a/38794379/7475250

Existe uma página da web que diz a que cada uma das "cores" corresponde? Todas as respostas aqui mostram algo como:

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

Mas o que # 333, # CB2326, etc. realmente mudam? Obviamente, posso apenas alterá-los e ver o que muda, mas seria bom ter essa referência disponível em algum lugar.

Os documentos coloridos estão disponíveisaqui. Embora úteis, eles não descrevem o que a mudança de uma cor específica realmente faz. Abaixo está minha melhor descrição.

A proposta de cores fornece aos Highcharts as cores que você gostaria que o gráfico percorresse. Por exemplo, se você tiver a seguinte cor prop.

colors: ['blue', 'green']

Suas fatias de torta alternariam entre azul e verde. Mudando de azul para vermelho, suas cores alternariam entre vermelho e verde. Teste-o com o seguinterabeca

Expandir a lista de cores aumenta o número de cores antes de repetir.

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

Repetiria as cores se mais de 4 fatias estivessem em seu conjunto de dados.

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

Existe uma página da web que diz a que cada uma das "cores" corresponde? Todas as respostas aqui mostram algo como:

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

Mas o que # 333, # CB2326, etc. realmente mudam? Obviamente, posso apenas alterá-los e ver o que muda, mas seria bom ter essa referência disponível em algum lugar.

Fonte
Translate

Eu tive o mesmo problema. Em highcharts.css, há uma seção chamada "Cores padrão". Depois de excluir esta seção, poderia usar cores personalizadas. De qualquer forma, acho que você não precisa de highcharts.css se usar a versão v5.0.4 ou superior.

Fonte
Translate

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

Em gráficos altos temos cores embutidas. Então você precisa mudar o caminho da cor [0] ou [1] ........ [6]

Fonte
Leave a Reply
You must be logged in to post a answer.
Sobre o autor