1

Olá,

Estou tendo problemas ao tentar mostrar mais de dois gráficos com chart.js; No momento eu tenho dois gráficos que carregam perfeitamente no meu código (ctx, ctx2), já quando tento carregar o terceiro, ele não mostra e resulta isso no meu console:

inserir a descrição da imagem aqui

Segue tbm código: https://jsbin.com/yibutifodo/1/edit?html,js,output

Grato.

2
  • Como está o envio dos charts para as <div> correspondentes? Poste o código. 20/01/2017 às 13:27
  • está no link @WilliamAparecidoBrandino 20/01/2017 às 13:42

1 Resposta 1

4

$(function() {
  var optionsBar = {
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };

  var dataBar = {
    labels: [2015, 2016, 2017],
    datasets: [{
      label: "CPF's Enviados",
      backgroundColor: "rgba(0,51,90,0.8)",
      borderColor: "rgba(0,51,90,0.9)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(0,51,90,0.9)",
      hoverBorderColor: "rgba(0,51,90,1)",
      data: [555, 666, 777]
    }, {
      label: "Propostas Finalizadas",
      backgroundColor: "rgba(0,130,229,0.8)",
      borderColor: "rgba(0,130,229,0.9)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(0,130,229,0.9)",
      hoverBorderColor: "rgba(0,130,229,1)",
      data: [444, 555, 666]
    }, {
      label: "Propostas Aprovadas",
      backgroundColor: "rgba(43,139,74,0.8)",
      borderColor: "rgba(43,139,74,0.9)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(43,139,74,0.9)",
      hoverBorderColor: "rgba(43,139,74,1)",
      data: [333, 444, 555]
    }]
  };

  var optionsLine = {
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };

  var dataLine = {
    labels: ['2015', '2016', '2017'],
    datasets: [{
      label: "% Aprovação (Propostas Finalizadas PDV)",
      fill: false,
      backgroundColor: "rgba(255,108,0,0.7)",
      borderColor: "rgba(255,108,0,1)",
      borderWidth: 4,
      data: [44, 55, 66]
    }, {
      label: "% Aproveitamento (CPF's Únicos PDV)",
      fill: false,
      backgroundColor: "rgba(255,246,0,0.6)",
      borderColor: "rgba(255,246,0,1)",
      borderWidth: 4,
      data: [33, 44, 55]
    }]
  };

  var options1 = {
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };

  var data1 = {
    labels: ['2015', '2016', '2017'],
    datasets: [{
      label: "% IPP 1ª COMPRA",
      fill: false,
      backgroundColor: "rgba(33, 107, 57,0.7)",
      borderColor: "rgba(33, 107, 57,1)",
      borderWidth: 4,
      data: [33, 22, 99]
    }, {
      label: "% IPP JUROS + ALÇADA",
      fill: false,
      backgroundColor: "rgba(23, 81, 125,0.7)",
      borderColor: "rgba(23, 81, 125,1)",
      borderWidth: 4,
      data: [78, 45, 96]
    }, {
      label: "% IPP SEGUROS",
      fill: false,
      backgroundColor: "rgba(255,0,255,0.7)",
      borderColor: "rgba(255,0,255,1)",
      borderWidth: 4,
      data: [36, 19, 55]
    }]
  };


  function gerarGraficos() {
    var ctx = document.getElementById("chart-one").getContext("2d");
    var BarChart2 = new Chart(ctx, {
      type: 'bar',
      data: dataBar,
      options: optionsBar
    });

    var ctx2 = document.getElementById("chart-two").getContext("2d");
    var LineChart = new Chart(ctx2, {
      type: 'line',
      data: dataLine,
      options: optionsLine
    });

    var ctx3 = document.getElementById("chart-three").getContext("2d");
    var LineChart2 = new Chart(ctx3, {
      type: 'line',
      data: data1,
      options: options1
    });
  }

  gerarGraficos();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="chart-one"></canvas>
<canvas id="chart-three"></canvas>
<canvas id="chart-two"></canvas>

7
  • Grato @diego Souza, estava trazendo a biblioteca errada. Mas como pode ver ele não gerou o terceiro grafico 20/01/2017 às 13:44
  • Você inverteu no último gráfico as variáveis do data e do options. E eu nem vi também 20/01/2017 às 13:57
  • mas só de mudar as bibliotecas ele já gerou os dois primeiros 20/01/2017 às 14:08
  • Agora está certo ? 20/01/2017 às 14:41
  • 1
    Foi o que eu disse acima. Você inverteu as variáis do terceiro chart. Estava options1 no data e data1 no options. 20/01/2017 às 15:13

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 .