Chart.js 除非我设置超时，否则不会渲染

Question

好吧，我和这个人有同样的问题：，对他来说，设置超时就解决了，但对我来说，这甚至不可能在我的网站上引入，我不想工作timeouts.I 正在为 chart.js.There 创建 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');
        },

    }

我们可以使用 htmlitem[0].childnodes[0] 或 document.getElementById('myChart2')

创建图表

Answer 1

我通过添加将 canvar 封装到 div 来解决它，因此 canva 随我的页面调整大小，我更改了：

来自：

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 现在可以使用了

Chart.js 除非我设置超时，否则不会渲染

Chart.js not rendering unless i set a timeout

html

javascript

web-component

chart.js