Angularjs中的動態創建或Highcharts

我想用Highcharts在Angularjs中動態創建圖表。問題是，Highcharts沒有找到div來呈現它，儘管它已經被創建。Angularjs中的動態創建或Highcharts

<div ng-controller="MyCtrl"> 
    <button class="btn btn-default" ng-click="test()">Test</button> 
    <div id="test"></div> 
</div>

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

這裏是我的小提琴：http://jsfiddle.net/Phosphoros/bRNZV/2/

提前非常感謝！

來源

2013-10-15 sclausen

閱讀文檔。

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.

你不應該傳遞「＃」。

僅供參考 - 您使用Angular的方式並不意味着要使用它。你不應該在控制器中做DOM操作。圖表應該是一個指令。

編輯：更新你的小提琴的東西更像是應該的：http://jsfiddle.net/bRNZV/4/

來源

2013-10-15 13:30:42

我是絕對對我的愚蠢。我閱讀文檔。我知道如何使用renderTo。我沒有看到。對不起： - [ – sclausen

renderTo將不包含＃。

renderTo: "#" + name

替換爲：

renderTo: name

查閱DEMO

來源

2013-10-15 13:31:51

Angularjs中的動態創建或Highcharts

回答

相關問題