Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Gráficos em Electron

Bonjour folks, eu estou fazendo um aplicativo Electron que tem que salvar alguns dados e gerar gráficos. Estava pesquisando e vi um tal de "Chart.js", só que não entendi muito bem como o usar em Electron, pois ao que parece ele é originalmente para web.

Alguém poderia me explicar o que é, exatamente, o Chart.js e como usa-lo na minha aplicação Electron? Muito obrigado desde já.

OBS: Caso tenham outra sugestão de como construir gráficos, por favor compartilhem!

5 respostas

Fala ai Daniel, tudo bem? O uso seria exatamente o mesmo, isso porque Electron é web, ou seja, é um navegador Chromium que está rodando por baixo dos panos.

Então você precisa baixar e importar o .js na página e fazer uso da biblioteca como demanda sua documentação.

Espero ter ajudado.

Fala Matheus, obrigado pela resposta! Foi isso mesmo que eu fiz, aqui está o código:

<canvas id="chart"></canvas>
            <script>
                var Chart = require('chart.js');
                var ctx = document.getElementById('chart').getContext('2d');
                var chart = new Chart(ctx, {
                // The type of chart we want to create
                type: 'line',

                // The data for our dataset
                data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My First dataset',
                    backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },
    // Configuration options go here
                options: {}
});
            </script>

Fala Daniel, como você importou o arquivo .js da Chart, não precisa fazer esse require, o objeto Chart já vai estar disponível globalmente na window para uso.

Espero ter ajudado.

solução!

Olá, vim atualizar a discussão!

Baixei o módulo do chart.js e instalei com --save na minha aplicação. Eu chamo o código no html:

<canvas id="chart"></canvas><script>require('./js/graficos')</script>

E coloquei as configurações em um arquivo .js chamado "graficos", o qual tive que importar no final de cada tag <canvas> . No arquivo .js, eu utilizo o requerimento:

var Chart = require('chart.js');

Boa Daniel, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.