如何在电子应用程序中配置Chart.js？

hrirmatl 于 2022-11-06 发布在 Chart.js

关注(0)|答案(3)|浏览(249)

我对电子是新手，所以我正在学习基本的结构。
所以，我想在我的电子应用程序中实现chart.js。问题是：在我的主页上，图表只是一个空白空间...但是在html检查器中看一看，我可以看到创建的画布。
我已经做了什么：
1.我已经安装了带有npm install chart.js --save的chart.js，我们可以在官方的chart.js文档（https://www.chartjs.org/docs/latest/getting-started/installation.html）中找到它。
我的感觉告诉我，我在调用图表库或类似的东西时做错了什么。我的代码如下：

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

正如你所看到的，我使用的是官方的例子。唯一的增加是const { chart } = require('electron-chartjs');。所以，我认为我做错了什么或者忽略了一些重要的步骤。

chart.js

来源：https://stackoverflow.com/questions/65276362/how-can-i-configure-chart-js-in-a-electron-app

3条答案

按热度按时间

06odsfpq1#

更新：
下面是新代码：

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

我必须要求“chart.js”，但我要求“电子图表，js”。画布ID是错误的。

展开查看全部

赞(0）回复(0）举报 2022-11-06

z3yyvxxp2#

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

请注意占位符{{chartData}}。还要注意，您必须替换Chart.js文件中的实际脚本（您可以链接到该脚本文件，但这样您将需要一个提供静态文件的模块）

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/');

我们只是用实际数据替换占位符。

展开查看全部

赞(0）回复(0）举报 2022-11-06

06odsfpq3#

更新电子版21.2.0。
1.从npm下载chart.js模块
1.修改索引.html：
1.在 meta中添加“unsafe-inline”

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

1.现在，我们可以像往常一样使用chart.js。
1.我只是不知道如何设置我的图表的自定义宽度/高度）：
演示代码可从以下位置获得：https://github.com/zdzmzych/electronNoiseAnalyzer

赞(0）回复(0）举报 2022-11-06

我来回答

如何在电子应用程序中配置Chart.js？

3条答案

相关问题

热门标签

最新问答