0

Fui respondido em uma pergunta anterior em relação a mudar cores do meu gráfico, porém, quero saber como posso mudar as cores de cada barra individualmente para as cores que eu quiser?

Segue o código modificado na resposta pelo usuário Marciano Machado:

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'column',
    options3d: {
      enabled: true,
      alpha: 6,
      beta: 16,
      depth: 100,
      viewDistance: 200
    }
  },
  xAxis: {
    type: 'category'
  },
  title: {
    text: 'Clientes'
  },
  subtitle: {
    text: 'Gráfico demonstrativo'
  },
  plotOptions: {
    column: {
      depth: 25
    }
  },
  series: [{
    "colorByPoint": true,
    data: [{
      "name": "Coluna 1",
      "y": 500.94,
      "drilldown": "Coluna "
    }, {
      "name": "Coluna 2",
      "y": 106.4,
      "drilldown": "Coluna 2"
    }, {
      "name": "Coluna 3",
      "y": 1000.5,
      "drilldown": "Coluna 3"
    }, {
      "name": "Coluna 4",
      "y": 144.0,
      "drilldown": "Coluna 4"
    }]
  }]
});

function showValues() {
  $('#alpha-value').html(chart.options.chart.options3d.alpha);
  $('#beta-value').html(chart.options.chart.options3d.beta);
  $('#depth-value').html(chart.options.chart.options3d.depth);
}


$('#sliders input').on('input change', function() {
  chart.options.chart.options3d[this.id] = parseFloat(this.value);
  showValues();
  chart.redraw(false);
});

showValues();
#container,
#sliders {
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto;
}

#container {
  height: 400px;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>
<div id="sliders">
</div>

2 Respostas 2

1

A reposta do usuário rnd_rss me ajudou muito. Segue o código como eu queria:

series: [{
"colorByPoint": true,
data: [{
"name": "Ativos",
color: '#90ed7d',
"y": 500,
"drilldown": "Ativos"
}, {
"name": "Suspensos",
color: '#f7a35c',
"y": 106,
"drilldown": "Suspensos"
}, {
"name": "Cancelados",
color: '#e0042e',
"y": 1000,
"drilldown": "Cancelados"
}]

0

Você deve definir a cor quando define o conjunto de dados:

series: [{
    "colorByPoint": true,
    data: [{
      color: '#0066FF', // aqui vai a cor que você quer, o hexadecimal no caso
      "name": "Coluna 1",
      "y": 500.94,
      "drilldown": "Coluna "
    }, {
      color: '#0066FF', // aqui vai a cor que você quer, o hexadecimal no caso
      "name": "Coluna 2",
      "y": 106.4,
      "drilldown": "Coluna 2"
    }, {
      color: '#0066FF', // aqui vai a cor que você quer, o hexadecimal no caso
      "name": "Coluna 3",
      "y": 1000.5,
      "drilldown": "Coluna 3"
    }, {
      color: '#0066FF', // aqui vai a cor que você quer, o hexadecimal no caso
      "name": "Coluna 4",
      "y": 144.0,
      "drilldown": "Coluna 4"
    }]

Aconselho a consultar a documentação ela é bem fácil de entender e tem vários exemplos.

ref: https://www.highcharts.com/docs/chart-concepts/series#4

5
  • 1
    Muito obrigado amigo. Deu muito certo, porém, só para explicar, o código para modificar a cor deve ficar dentro do "data":
    – Carlos
    Commented 23/03/2019 às 12:28
  • verdade Carlos, fora onde coloquei ela altera todas as cores, ou seja fica tudo na mesma cor, para alterar individualmente cada serie de dados tem que colocar a cor dentro do data. Eu ajustei minha resposta para ficar de acordo
    – rnd_rss
    Commented 23/03/2019 às 12:59
  • Teria como me ajudar em mais uma coisa? Queria passar o valor de uma variável php nesse script. Ex.: <?php $teste="900"; ?> no valor da coluna.
    – Carlos
    Commented 23/03/2019 às 13:45
  • Abre outra pergunta, faz tempo que não mexo com php e fica mais facil de alguem te ajudar
    – rnd_rss
    Commented 23/03/2019 às 14:40
  • Blza. Vou fazer isso. valeu.
    – Carlos
    Commented 23/03/2019 às 14:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .