하이 차트가 내 div에 렌더링되지 않습니다

Question

하이 뼈대 데모를 backbone.js 위젯에 렌더링하려고합니다.

HighChart Demo을 내 위젯에 포함하려고합니다. 템플릿이 생성되고 HighCharts를 제외한 모든 것이 작동합니다. 하이 챠트는 나중에 차트를 추가 할 수 있기 때문에 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; 
}