我对电子是新手,所以我正在学习基本的结构。
所以,我想在我的电子应用程序中实现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');
。所以,我认为我做错了什么或者忽略了一些重要的步骤。
3条答案
按热度按时间06odsfpq1#
更新:
下面是新代码:
我必须要求“chart.js”,但我要求“电子图表,js”。画布ID是错误的。
z3yyvxxp2#
请注意占位符{{chartData}}。还要注意,您必须替换Chart.js文件中的实际脚本(您可以链接到该脚本文件,但这样您将需要一个提供静态文件的模块)
我们只是用实际数据替换占位符。
06odsfpq3#
更新电子版21.2.0。
1.从npm下载chart.js模块
1.修改索引.html:
1.在 meta中添加“unsafe-inline”
1.现在,我们可以像往常一样使用chart.js。
1.我只是不知道如何设置我的图表的自定义宽度/高度):
演示代码可从以下位置获得:https://github.com/zdzmzych/electronNoiseAnalyzer