js不渲染,除非我设置一个超时

Chart.js not rendering unless i set a timeout

本文关键字:超时 一个 设置 非我 js      更新时间:2023-09-26

好吧,我有同样的问题,这家伙:图表。js没有显示在我的视图,为他解决了设置一个超时,但对我来说,这甚至不可能在我的网络中引入,我不想超时工作。我正在努力为chart.js创建web组件。有没有办法在不设置超时的情况下等待图表渲染?,等待时间为渲染时间

我的代码是:
flexygo.ui.wc.flxChart = function () {
    return {
        htmlItem: null,
        moduleId: null,
        refresh: function () {
            this.init();
        },

        init: function () {
            var ctx = this;
            ctx.htmlItem.html('<canvas id="myChart2" height="400" width="800" style="width:800px;height:400px;"></canvas>'); 
            ctx.render();
        },
        render: function () {
            var ctx = this;

            var data = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                    label: "My First dataset",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [65, 59, 80, 81, 56, 55, 40],
                    spanGaps: false,
                }]
            };
            window.onload = function () {
                    var myChart = new Chart(ctx.htmlItem[0].childNodes[0], {
                    type: 'line',
                    data: data,
                    options: {
                        scales: {
                            xAxes: [{
                                display: false
                            }]
                        }
                    }
                });
            }
        },
        translate: function (str) {
            return flexygo.localization.translate(str);
        },
        startLoading: function () {
            this.htmlItem.parents('flx-module').find('.icon-sincronize').addClass('icon-spin txt-outstanding');
        },
        stopLoading: function () {
            this.htmlItem.parents('flx-module').find('.icon-sincronize').removeClass('icon-spin txt-outstanding');
        },
    }

创建图表,我们可以使用html[0]。childnodes[0] or document.getElementById('myChart2')

我解决了它添加封装画布到一个div,所以画布调整我的页面的大小,我改变:

来自:

ctx.htmlItem.html('<canvas id="myChart2" height="400" width="800" style="width:800px;height:400px;"></canvas>'); 

ctx.htmlItem.html('<div><canvas id="myChart2" height="400" width="800" style="width:800px;height:400px;"></canvas></div>'); 

a现在可以了