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

时间:2016-08-23 06:27:49

标签: javascript html5 chart.js web-component

嗯,我有同样的问题,这个人:Chart.js not showing in my view,对他来说它解决了设置暂停但对我来说,甚至没有可能在我的网站上介绍,我不会'我想使用timeouts.I'我正在为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');
        },

    }

创建图表我们可以使用htmlitem [0] .childnodes [0]或document.getElementById(&#39; myChart2&#39;)

0 个答案:

没有答案