3
respostas

NodeJs renderizar ChartJs

Pessoal, Boa tarde Não encontrei o tópico do curso de NodeJs então por isso está em off topic.

Estou tentando gerar um chart bar no servidor nodejs, isso em específico não está no curso porém caso alguém consiga ajudar eu agradeço.

Abaixo recebo uma requisição e estou tentando renderizar o gráfico, porém não acusa erro no console e nem retorna nada para minha requisição, alguém teria uma ideia do porque ?

Para entenderem melhor o cenário, utilizo a framework Laravel e tenho um Cron rodando no servidor para disparar este gráfico por meio do laravel. A ideia seria criar essa "api" em node que receba os dados JSON do laravel e retorna o gráfico em SVG.

express.get('/quantidade', function(req, res){

        var Chart = require('chartjs-node');

        var Canvas = require('canvas')
          , Image = Canvas.Image
          , canvas = new Canvas(600, 600)
          , ctx = canvas.getContext('2d');

            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: [ 'UM', 'DOIS' ],
                    datasets: 
                        [{
                            label: "Quantidade",
                            fillColor: "rgba(0,0,255,0.2)",
                            highlightFill: "rgba(0,130,0,1)",
                            strokeColor: "rgba(0,0,255,0.8)",
                            data: [ 54, 54 ],
                            spanGaps: false,
                        }]
                },
                options: {
                    responsive: false,
                    animation: false,
                    width: 400,
                    height: 400,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            });

        res.end('<div><img src="'+canvas.toDataURL()+'" /></div>');
    });
3 respostas

Danillo Cacharo, as propriedades do Canvas são do browser e não renderizam no servidor.

O que você pode fazer é retornar o JSON com as infos para o Front e fazer um update no ChartJS, ou renderiza-lo novamente, mas sempre no lado do Front.

Pelo que eu eu entendi do seu código, você queria gerar uma imagem com o seu gráfico direto pelo backend.

Você pode seguir a sugestão citada acima, ou seja, fazer uma rota que apenas retorne um JSON com os dados do gráfico, e no frontend, você atualiza o gráfico com estes dados. Tem algo assim neste link:

https://stackoverflow.com/questions/32092676/using-chart-js-inside-node-js

Eu lembro que no curso a forma de fazer algo assim é diferente (usa res_render(nome da view,, objeto json com as variaveis). Mas o resultado final é o mesmo.

Talvez seja possível criar uma rota que retorna apenas uma imagem. Se isso funcionar, dentro da view, bastaria fazer "img src=/endereco_da_rota".

Este link mostra um exemplo de rota que retorna imagem:

https://stackoverflow.com/questions/32517602/nodejs-serve-png-generated-by-node-canvas

Basicamente com esse exemplo eu realmente consigo retornar uma imagem para a view sim.

"https://stackoverflow.com/questions/32517602/nodejs-serve-png-generated-by-node-canvas"

Porém o gráfico que preciso gerar não irá para uma view, será exportado em pdf e enviado direto para um e-mail. Por isso pensei em enviar para o NodeJs e retornar o SVG para o Laravel imprimir a imagem ao exportar em PDF.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software