highcharts不會渲染到我的div

Question

我想渲染一個highchart演示到backbone.js小部件。

我試圖在我的小工具中包含HighChart Demo，模板生成，除HighCharts以外的所有工作都正常。我懷疑highchart在渲染到一個尚未放置在DOM上的div時出現問題，因爲我可以在之後添加圖表。

對於如何在渲染週期中將圖表部件添加到樹中，有沒有任何想法？

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; 
        } 
       } 
      }] 
     }); 
    } 
}); 

到目前爲止，我的最佳解決方案是觸發一個事件並編寫一個後期渲染循環。

這絕不是最佳選擇。

Answer 1

嘗試以下操作：

render: function() { 
    var element = this.el; 
    $(this.el).html(this.template()); 
    $("#chart").append(element); 
    this.renderChart(element);   
    return this; 
}