Смущен отображением простого графика с Chart.js - PullRequest
Новая
       22

Смущен отображением простого графика с Chart.js

0 голосов
/ 20 февраля 2019

Я довольно новичок в разработке Magic Mirror.Я пытаюсь разработать модуль с помощью chart.js.Я использую модуль, представленный на MMM-Chart.

Вот мой код. 

Module.register("MMM-Chart", {
    defaults: {
        width: 200,
        height: 200,
        chartConfig: {
            type: 'bar',
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        }
    },

    getScripts: function () {
        return ["modules/" + this.name + "/node_modules/chart.js/dist/Chart.bundle.min.js"];
    },

    start: function () {
        this.config = Object.assign({}, this.defaults, this.config);
        Log.info("Starting module: " + this.name);
    },

    getDom: function () {
        console.log("*****" + JSON.stringify(this.config.chartConfig));
        // Create wrapper element
        const wrapperEl = document.createElement("div");
        wrapperEl.setAttribute("style", "position: relative; display: inline-block;");

        // Create chart canvas
        const chartEl = document.createElement("canvas");
        chartEl.width = this.config.width;
        chartEl.height = this.config.height;

        // Init chart.js
        this.chart = new Chart(chartEl.getContext("2d"), this.config.chartConfig);

        // Append chart
        wrapperEl.appendChild(chartEl);

        return wrapperEl;
    }
});

Когда я запускаю этот код, в консоли не появляется сообщение об ошибке, такжена моем экране не отображается диаграмма.

Вот что я добавил в мой конфигурационный файл. 

{
module: "MMM-Chart",
position: "top_left"
}

Пожалуйста, дайте мне знать, где я ошибаюсь и как я могу это исправить.

Спасибо !!!

...