javascript - 如何在 Electron 应用程序中配置 Chart.js？

Question

我是 Electron 新手，所以我正在学习基本配置。

所以，我想在我的 Electron 应用程序中实现 chart.js。问题是:在我的主页上，图表只是一个空白区域...但是在 html 检查器中我可以看到创建的 Canvas 。

我已经做了:

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');。所以，我相信我做错了什么或忽略了一些重要的步骤。

Answer 1

更新:

这是新代码:

<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”。 Canvas ID 错误。