0

O código para o gráfico esta em HTML.

No código que segue abaixo, existem estes labels:

["Área 2","Área 3","Área 7","Área 5","Área 10","Área 8","Área 11","Área 9","Área 1","Área 14"]

De acordo com os valores data:

 [145,110,100,75,70,70,60,45,40,20],

Consegui fazer uma matriz para:

data: {labels:[MatrizSArea],

E uma outra para:

data: [MatrizSPontos],

Mas não consigo montar o gráfico, as variáreis até ficam carregadas mas não aparece de forma correta no gráfico

Segue o código:

function Mychart(){


var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {labels:[MatrizSArea],
        datasets: [{label: 'SITUAÇÃO CRÍTICA',
            data: [MatrizSPontos],

            backgroundColor: [

                'rgb(255, 0, 0)',
                'rgb(255, 0, 0)',
                'rgb(255, 0, 0)',
                'rgb(191, 143, 0)',
                'rgb(191, 143, 0)',
                'rgb(255, 255, 0)',
                'rgb(255, 255, 0)',
                'rgb(0, 176, 80)',
                'rgb(0, 176, 80)',
                'rgb(0, 176, 80)'

            ],
        }]
    },
    options: {
        title: {
                    display: true,
                    text: 'DEPARTAMENTO DE ESTAMPARIA'
                },

        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

}

Os valore não aparecem e os labels ficam um abaixo do outro

1 Resposta 1

0

Você está utilizando o Chart.js né? Então.. Você pode utilizar a função update() no Chart para atualizar.

Tudo que você precisa fazer é trocar o valor do dataset (ou adicionar um novo valor..) e chamar o método update().

Segue um exemplo onde altero o valor do atributo data do dataset por um outro array e atualizo o chart:

PS: Note que você não precisa simplesmente alterar o data. você pode trocar todo o objeto referente ao dataset sem problemas.

var ctx = document.getElementById("myChart").getContext('2d');

// Pode ser um array de objetos no mesmo formato
// do dataset do Chart, que pode ser alterado por completo
// caso necessário.. 


var chartData = [{
    labels: ["Área 2", "Área 3", "Área 7", "Área 5", "Área 10", "Área 8", "Área 11", "Área 9", "Área 1", "Área 14"],
    datasets: [{
      label: 'SITUAÇÃO CRÍTICA',
      data: [145, 110, 100, 75, 70, 70, 60, 45, 40, 20],
      backgroundColor: [
        'rgb(255, 0, 0)',
        'rgb(255, 0, 0)',
        'rgb(255, 0, 0)',
        'rgb(191, 143, 0)',
        'rgb(191, 143, 0)',
        'rgb(255, 255, 0)',
        'rgb(255, 255, 0)',
        'rgb(0, 176, 80)',
        'rgb(0, 176, 80)',
        'rgb(0, 176, 80)'
      ],
    }]
  },
  {
    labels: ["Área 1", "Área 4", "Área 6", "Área 15", "Área 20", "Área 18", "Área 21", "Área 19", "Área 13", "Área 24"],
    datasets: [{
      label: 'SITUAÇÃO NORMAL',
      data: [110, 210, 150, 25, 130, 90, 10, 115, 230, 25],
      backgroundColor: [
        'rgb(255, 100, 0)',
        'rgb(255, 0, 100)',
        'rgb(255, 50, 50)',
        'rgb(191, 143, 40)',
        'rgb(191, 143, 40)',
        'rgb(255, 100, 120)',
        'rgb(255, 100, 120)',
        'rgb(50, 176, 80)',
        'rgb(50, 176, 80)',
        'rgb(60, 176, 80)'
      ],
    }]
  }
];

// aguarda uns segundos...
setTimeout(function() {
  // Substitui os dados do primeiro dataset
  myChart.data = chartData[1];

  // Atualiza o chart...
  myChart.update();
}, 5000);

var myChart = new Chart(ctx, {
  type: 'bar',
  data: chartData[0],
  options: {
    title: {
      display: true,
      text: 'DEPARTAMENTO DE ESTAMPARIA'
    },

    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart" width="10px"></canvas>

9
  • Ok, entendi. Mas como fazer o Array ser dinâmico tanto para os valores e quanto para labels? Digamos que tenho uma lista e de acordo com o registro feito pode alterar os valores e as posições dos labels. 21/03/2018 às 17:52
  • Atualizei a resposta pra user uma matriz de labels também.. Você poderia.. em vez de usar 2 arrays como no exemplo. criar um objeto inteiro como é o objeto do atributo data e substituir conforme a necessidade. (vou editar denovo com um exemplo assim.. perai) 21/03/2018 às 17:55
  • Assim, ficou muito bom, mas sem ter que digitar diretamente no código como faria para ser automático a cada vez que eu entrar ou atualizar a página os labels e valores? 21/03/2018 às 17:59
  • Cara.. idealmente você vai receber esses valores de algum lugar né.. não seria diretamente no código. Você poderia ter esses dados em uma base, e ao fazer uma query, retornar os labels e valores, etc.. dái você processa no javascript, monta o objeto do Chart e atualiza. 21/03/2018 às 18:05
  • Agora consegui data: {labels: [MatrizSArea], e data: [MatrizSPontos], mas não consigo utilizar os valores que estão nas variáveis para posicionar no gráfico. 22/03/2018 às 15:30

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 .