Javascript highcharts将不会呈现给我的div
我正在尝试将highchart演示呈现给backbone.js小部件 我正在尝试在我的小部件中包含，模板生成，除了HighCharts之外的所有东西都在工作。我怀疑highchart在渲染到尚未放在DOM上的div时遇到问题，因为我可以在之后添加图表 对于如何在渲染周期中将图表小部件添加到树中，anyont有什么想法吗Javascript highcharts将不会呈现给我的div,javascript,backbone.js,highcharts,Javascript,Backbone.js,Highcharts,我正在尝试将highchart演示呈现给backbone.js小部件 我正在尝试在我的小部件中包含，模板生成，除了HighCharts之外的所有东西都在工作。我怀疑highchart在渲染到尚未放在DOM上的div时遇到问题，因为我可以在之后添加图表 对于如何在渲染周期中将图表小部件添加到树中，anyont有什么想法吗 window.HomeView = Backbone.View.extend({ initialize:function () {}, render:func
window.HomeView = Backbone.View.extend({
initialize:function () {},
render:function () {
$(this.el).html(this.template());
var chart = $("#chart", this.el)[0];
this.renderChart(chart);
return this;
},
renderChart: function(container) {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
// Build the data arrays
var browserData = [];
var versionsData = [];
for (var i = 0; i < data.length; i++) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
for (var j = 0; j < data[i].drilldown.data.length; j++) {
var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: container,
type: 'pie'
},
title: {
text: 'Browser market share, April, 2011'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
innerSize: '60%',
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null;
}
}
}]
});
}
});
window.HomeView=Backbone.View.extend({
初始化：函数（）{}，
渲染：函数（）{
$（this.el）.html（this.template（））；
var图表=$（“#图表”，this.el）[0]；
本图为renderChart（图表）；
归还这个；
},
renderChart:函数（容器）{
var colors=Highcharts.getOptions（）.colors，
类别=['MSIE'、'Firefox'、'Chrome'、'Safari'、'Opera']，
名称='浏览器品牌'，
数据=[{
y:55.11，
颜色：颜色[0]，
向下展开：{
名称：“MSIE版本”，
类别：['MSIE 6.0'，'MSIE 7.0'，'MSIE 8.0'，'MSIE 9.0']，
数据：[10.85,7.35,33.06,2.81]，
颜色：颜色[0]
}
}, {
y:21.63，
颜色：颜色[1]，
向下展开：{
名称：“Firefox版本”，
类别：[“Firefox 2.0”、“Firefox 3.0”、“Firefox 3.5”、“Firefox 3.6”、“Firefox 4.0”]，
数据：[0.20,0.83,1.58,13.12,5.43]，
颜色：颜色[1]
}
}, {
y:11.94，
颜色：颜色[2]，
向下展开：{
名称：“Chrome版本”，
类别：[“Chrome 5.0”、“Chrome 6.0”、“Chrome 7.0”、“Chrome 8.0”、“Chrome 9.0”，
“Chrome 10.0”、“Chrome 11.0”、“Chrome 12.0”]，
数据：[0.12,0.19,0.12,0.36,0.32,9.91,0.50,0.22]，
颜色：颜色[2]
}
}, {
y:7.15，
颜色：颜色[3]，
向下展开：{
名称：“Safari版本”，
类别：[“Safari 5.0”、“Safari 4.0”、“Safari Win 5.0”、“Safari 4.1”、“Safari/Maxthon”，
“Safari 3.1”、“Safari 4.1”]，
数据：[4.55,1.42,0.23,0.21,0.20,0.19,0.14]，
颜色：颜色[3]
}
}, {
y:2.14，
颜色：颜色[4]，
向下展开：{
名称：“歌剧版”，
类别：['Opera9.x'，'Opera10.x'，'Opera11.x']，
数据：[0.12,0.37,1.65]，
颜色：颜色[4]
}
}];
//构建数据阵列
var browserData=[]；
var versionsData=[]；
对于（变量i=0；i5？this.point.name:空；
},
颜色：'白色'，
距离：-30
}
}, {
名称：'版本'，
数据：versionsData，
内部尺寸：“60%”，
数据标签：{
格式化程序：函数（）{
//仅当大于1时显示
返回this.y>1？''+this.point.name+'：'+this.y+'%'：null；
}
}
}]
});
}
});
render: function () {
var element = this.el;
$(this.el).html(this.template());
$("#chart").append(element);
this.renderChart(element);
return this;
}
问题是$（this.el）可能还不在DOM上。。它可能在某个页面上作为小部件生成，并在以后添加到DOM中。。因此，呈现图表将不起作用。我得到了一个DOM插入错误，这是有意义的，因为我正在尝试将元素插入自身。请记住，中的#图表是在此.template（）生成的代码中定义的。这意味着查找$（'#chart'）没有意义，因为#chart在$（this.el）中。再说一次，#图表可能还没有添加到DOM中，因为它可能是更大的小部件的一部分