javascript - How can I configure Chart.js in a Electron app? - Stack Overflow

admin管理员组

文章数量:1425690

I'm new to electron so I'm learning the basic configuration.

So, i want to implement chart.js in my electron app. The problem is: on my main page, the chart is simply a blank space... but with a look in the html inspector I can see the canvas created.

What I already did:

1. I've installed chart.js with npm install chart.js --save which we can find in the official chart.js documentation (.html).

My feeling tells me that I'm doing something wrong in the call for the chart library or something like that. My code is below:

<canvas id="myChart"></canvas>

<script>
const { chart } = require('electron-chartjs');
var ctx = document.getElementById('myChart').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>

As you can see, I'm using the official example. The only addition was the const { chart } = require('electron-chartjs');. So, I believe I'm doing something wrong or ignoring some big step.

I'm new to electron so I'm learning the basic configuration.

So, i want to implement chart.js in my electron app. The problem is: on my main page, the chart is simply a blank space... but with a look in the html inspector I can see the canvas created.

What I already did:

1. I've installed chart.js with npm install chart.js --save which we can find in the official chart.js documentation (https://www.chartjs/docs/latest/getting-started/installation.html).

My feeling tells me that I'm doing something wrong in the call for the chart library or something like that. My code is below:

<canvas id="myChart"></canvas>

<script>
const { chart } = require('electron-chartjs');
var ctx = document.getElementById('myChart').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>

As you can see, I'm using the official example. The only addition was the const { chart } = require('electron-chartjs');. So, I believe I'm doing something wrong or ignoring some big step.

• javascript
• charts
• electron
• chart.js

Share Improve this question Follow edited Jun 28, 2021 at 1:03 Jason Aller 3,6522828 gold badges4141 silver badges3939 bronze badges asked Dec 13, 2020 at 13:49 Daniel DantasDaniel Dantas 16544 silver badges1515 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Update:

Here is the new code:

<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>

I had to require "chart.js", but i was requiring "electron-chart,js". And the canvas id was wrong.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script>
        // ** entire Chart.js library **
    </script>
    <style>
    </style>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        var data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: {{chartData}}
                }
            ]
        };

        var ctx = document.getElementById("myChart").getContext("2d");
        var myNewChart = new Chart(ctx).Line(data);
    </script>
</body>
</html>

Notice the placeholder {{chartData}}. Also do note that you have to substitute in the actual script from the Chart.js file (you could link to the script file, but then you'll need a module that serves up static files)

var http = require('http');
var fs = require('fs');

http.createServer(function (req, response) {
    fs.readFile('index.html', 'utf-8', function (err, data) {
        response.writeHead(200, { 'Content-Type': 'text/html' });

        var chartData = [];
        for (var i = 0; i < 7; i++)
            chartData.push(Math.random() * 50);

        var result = data.replace('{{chartData}}', JSON.stringify(chartData));
        response.write(result);
        response.end();
    });
}).listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');

We just substitute the placeholder with actual data.

Update for electron 21.2.0.

1. Download chart.js module from npm

2. Modify Index.html:

3. Add 'unsafe-inline' in meta

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'">
   

4. Now we can use chart.js as usual.

5. I only have no idea how to set custom width/height of my chart ):

Demo code is available on: https://github./zdzmzych/electronNoiseAnalyzer

本文标签： javascriptHow can I configure Chartjs in a Electron appStack Overflow