除非我设置超时，否则 Chart.js 不会呈现答案

【问题标题】：Chart.js not rendering unless i set a timeout除非我设置超时，否则 Chart.js 不会呈现
【发布时间】：2016-08-24 17:51:41
【问题描述】：

好吧，我和这个人有同样的问题：Chart.js not showing in my view，对他来说，设置超时解决了，但对我来说，这甚至不可能在我的网络中引入，我不想使用超时。我'正在为chart.js创建网络组件。有什么方法可以等待图表得到渲染而不设置超时？，等待时间就是渲染时间

我的代码是：

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')

【问题讨论】：

其实是框架'flexygo'相关的问题
什么是htmlItem[0]？
应该是第一个显示在网络上的项目，我使用它或 ctx=document.getElementById('myChart2') 并且会这样做，使用预加载的画布并且不起作用无需在网络通话中预加载

标签： javascript html chart.js web-component

【解决方案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>');

现在可以了

【讨论】：