Как настроить Chart.js в приложении Electron?
Я новичок в электроне, поэтому изучаю базовую конфигурацию.
Итак, я хочу реализовать chart.js в своем электронном приложении. Проблема в том, что на моей главной странице диаграмма представляет собой просто пустое место... но, взглянув в инспектор html, я вижу созданный холст.
Что я уже сделал:
- Я установил chart.js с помощью
npm install chart.js --save, которую мы можем найти в официальной документации по 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');. Итак, я считаю, что делаю что-то не так или игнорирую какой-то важный шаг.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
<!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.info('Server running at http://127.0.0.1:1337/');Мы просто заменяем заполнитель реальными данными.
Обновлять:
Вот новый код:
<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», но мне требовался «electron-chart, js». И идентификатор холста был неправильным.
Обновление для электрона 21.2.0.
Загрузите модуль chart.js из npm.
Измените Index.html:
Добавить 'unsafe-inline' в мета
<meta http-equiv = "Content-Security-Policy" content = "default-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'">Теперь мы можем использовать chart.js как обычно.
Я только понятия не имею, как установить пользовательскую ширину/высоту моей диаграммы):
Демо-код доступен на: https://github.com/zdzmzych/electronNoiseAnalyzer
Привет, @Джимми Джексон! Огромное спасибо за помощь. На самом деле, я справился с этим по-другому... Мне просто нужно было обратить внимание на мой
var Chart = require('chart.js');способ требовать chart.js, я делал это неправильно. И сертификат о том, что холст имеет правильный идентификатор. Спасибо за помощь! Я опубликую свой код в качестве ответа.