js不渲染,除非我设置一个超时
Chart.js not rendering unless i set a timeout
好吧,我有同样的问题,这家伙:图表。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现在可以了
相关文章:
- 你能加载一个带有JS超时的PHP包吗
- 是否从超时内开始间隔是一个问题
- 如何一个接一个地运行javascript超时,而不是并行运行
- 将图像替换为另一个图像,然后在超时后再次替换 - Javascript
- 如何创建一个内部带有延迟/超时的 javascript 书签
- 向右滑动一个图像,同时打开一个超时的新窗口url
- javascript”;具有超时的切换效果”;窃听是因为一个“;不透明度:0〃;
- WebAPI在登录超时时向我发送了一个完整的HTML页面.如何在AngularJS中使用此响应
- 指向一个对象'的属性超时
- 如何创建一个rucursive超时函数
- 为什么on('data')侦听器将两个不同的请求解释为一个,除非添加超时
- 多个JavaScript超时弹出窗口,只有在上一个弹出窗口关闭时才会显示
- 如何通过两个嵌套的匿名函数(一个带有超时的事件处理程序)传递变量
- 在AJAX成功中超时一个HTML标记
- 重复一个Promise,直到它没有被拒绝或超时为止
- 超时后如何更改下一个图像
- 我如何测试如果一个URL是一个有效的图像与超时的图像请求与javascript
- 反复调用一个函数,直到它的承诺被解决,或者直到设置的超时时间过去
- 延迟、取消或超时一个事件
- 如何超时一个jquery脚本设置为每隔半小时运行一次