3

Estou tentando colocar uma imagem nesse gráfico que represente as Labels, mas como é um canvas não sei como fazer isso no ChartJs.

JS

Gráfico1

myBarChart = new Chart(chartBar, {
  type: 'bar',
  data: {
     labels: dataLabel,
     datasets: [{
        data: dataValue,
        backgroundColor: dataColor,
        borderColor: dataBColor,
        borderWidth: 1,
        label: "NPS"
     }]
  },
  options: {
     legendCallback: function(chart) {
         var text = [];
         text.push('<div class="col-xs-12 legendaBarChart no-padding">');
         for (var i = 0; i < dataLegend.length; i++) {
             text.push('<div class="col-xs-12 col-sm-12 no-padding">');
             text.push('<span>' + dataLegend[i] + '</span>');
             text.push('</div>');
         }
         text.push('</div>');
         return text.join("");
     },
     responsive: true,
     maintainAspectRatio: false,
     animation : {
        duration: 1000,
        easing: "linear",
        onComplete: function () {
           var chartInstance = this.chart,
           ctx               = chartInstance.ctx;
           ctx.font          = "15px 'Helvetica Neue', Helvetica, Arial, sans-serif";
           ctx.textAlign     = 'center';
           ctx.textBaseline  = 'bottom';
           ctx.fillStyle     = "#000000";

           this.data.datasets.forEach(function (dataset, i) {
              var meta = chartInstance.controller.getDatasetMeta(i);
              meta.data.forEach(function (bar, index) {
                 data = dataset.data[index];
                 ctx.fillText(data, bar._model.x, bar._model.y - 5);
              });
           });
        }  
     },
     legend: {
        display: false,
        position: 'top'
     },
     scales: {
        yAxes: [{
           ticks: {
              beginAtZero: true
           },
           stacked: true
        }]
     },
     title: {
        display: true,
        text: 'Gráfico Comparativo de',
        fontSize: 18
     },
     hover: {
        animationDuration: 0
     },
     tooltips: {
        enabled: false,
        mode: 'single',
        titleFontSize: 16,
        bodyFontSize: 15,
        titleSpacing: 0,
        bodySpacing: 5,
        callbacks : {
           title: function(tooltipItem, data){
              return 'NPS';
           },
           label: function(tooltipItem, data){
              return data.datasets[0].data[1];
           }
        }
     }
  }
});

Nessa propriedade labels: dataLabel é onde eu monto um Array com os valores do gráfico, visto que vem por Ajax. Não aceita HTML, então não tem como eu colocar uma imagem.

Nessa parte abaixo, por exemplo, eu consigo descobrir a posição da barra e colocar o valor logo quando a mesma termina de ser animada.

this.data.datasets.forEach(function (dataset, i) {
   var meta = chartInstance.controller.getDatasetMeta(i);
   meta.data.forEach(function (bar, index) {
      data = dataset.data[index];
      ctx.fillText(data, bar._model.x, bar._model.y - 5);
   });
});

1 Resposta 1

1

Como de início não havia compreendido bem sua pergunta, estou aproveitando para atualizar minha resposta de acordo com o que conversamos.

Nunca trabalhei diretamente com o ChartJS, mas ao consultar a documentação para o seu modelo de gráfico em barras, acredito que você vai precisar de uma função similar a esta:

onComplete: function () {
    var chartInstance = this.chart;
    var ctx = chartInstance.ctx;
    var height = chartInstance.controller.boxes[0].bottom;
    ctx.textAlign = "center";
    Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
        var meta = chartInstance.controller.getDatasetMeta(i);
        Chart.helpers.each(meta.data.forEach(function (bar, index) {
            imagemA = new Image();
            imagemA.src = 'img/imagem.png';
            imagemA.onload = function(){
            context.drawImage(imagemA, bar._model.x, height - ((height - bar._model.y) / 2));
        }),this)
    }),this);
}

OBS: Não testei esta solução, acredito que está com alguns erros e faltando outras informações. Porém espero que lhe ajude a chegar na solução final. Boa sorte!

6
  • 2
    Mas é depois da animação mesmo que tenho que fazer isso. O problema é adicionar no lugar certo. 21/10/2016 às 15:50
  • @Gumball Já que não existem elementos HTML para você se basear, suspeito que terá que ajustar o posicionamento das imagens com regras de CSS aplicadas a classes, dinamicamente. Porém como a quantidade de colunas / tamanho do gráfico pode variar, isso é pouco prático. Infelizmente não sei o que você poderia realizar neste caso. 21/10/2016 às 16:04
  • @Gumball Tente este link, em inglês stackoverflow.com/questions/6011378/how-to-add-image-to-canvas você terá que utilizar a função context.drawImage(<imagem>, posicaox, posicaoy); Se funcionar vou modificar minha resposta 21/10/2016 às 16:16
  • Então... eu sei fazer isso. Mas não sei qual é a propriedade correta dentro do Canvas do ChartJs. Tipo, eu consigo adicionar um texto dentro da barra, mas não no lugar da Label... Tenho certeza que terei que usar isso que você me mandou, mas não sei em que lugar. 21/10/2016 às 16:19
  • Entendi, o que você realmente precisa descobrir são as coordenadas em que a imagem tem que ser impressa. Eu tentaria fazer isso calculando a porcentagem de altura e largura do gráfico, mas acredito que as posições não ficariam de acordo. 21/10/2016 às 16:34

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 .