2013-10-15 3 views
0

Highcharts를 사용하여 Angularjs에서 동적으로 차트를 만들고 싶습니다. 문제는 Highcharts가 이미 생성되었지만 Highchart가 렌더링 할 div를 찾지 못한다는 것입니다. 사전에 http://jsfiddle.net/Phosphoros/bRNZV/2/Angularjs의 동적 차트 생성

많은 감사 : 여기

function MyCtrl($scope) { 
    var names = ["ab", "cd", "de"]; 
    _.each(names, function(name) { 
    $("#test").append("<div id='" + name + "'>"); 
    }); 
    $scope.test = function() { 
    _.each(names, function(name) { 
     var chart = { 
     chart: { 
      type: 'line', 
      zoomType: 'x', 
      spacingRight: 20, 
      renderTo: "#" + name 
     }, 
     title: { 
      text: "name" 
     }, 
     xAxis: { 
      type: 'datetime', 
      dateTimeLabelFormats: { 
      month: '%e. %b', 
      year: '%b' 
      } 
     }, 
     series: [{ 
      name: "test1", 
      data: [ 
      [1, 2], 
      [2, 3], 
      [3, 3], 
      [4, 2] 
      ] 
     }] 
     } 
     var chartObj = new Highcharts.Chart(chart); 
    }); 
    } 
} 

<div ng-controller="MyCtrl"> 
    <button class="btn btn-default" ng-click="test()">Test</button> 
    <div id="test"></div> 
</div> 
내 바이올린입니다!

답변

0

설명서를 읽으십시오.

renderTo: String|Object 
The HTML element where the chart will be rendered. If it is a string, the element by that id is used. The HTML element can also be passed by direct reference. 

"하지 말아야 할 때"를 전달 중입니다.

참조 용 - 사용하지 않기 위해 각도를 사용하고 있습니다. 컨트롤러에서 DOM 조작을해서는 안됩니다. 차트는 지시어 여야합니다.

편집 : 더 어떻게해야처럼 뭔가로 바이올린을 업데이트 : http://jsfiddle.net/bRNZV/4/

+0

를 참조하십시오에

renderTo: "#" + name 

는 교체합니다. 나는 문서를 읽었다. 나는 renderTo를 사용하는 방법을 안다. 나는 그것을 들었다. 죄송합니다 :-[ – sclausen

0

renderTo은 # 포함되지 않습니다.

renderTo: name 

내가 나의 어리 석음에 대해 절대적입니다 DEMO