与Chart.js混淆显示简单图形

时间:2019-02-20 06:15:38

标签: node.js chart.js magic-mirror

我对Magic Mirror开发非常陌生。我正在尝试使用chart.js开发模块。我正在使用MMM图表中提供的模块。

这是我的代码。

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

请让我知道我要去哪里哪里以及如何解决这个问题。

谢谢!

0 个答案:

没有答案
相关问题