0

我想用 Highcharts 在 Angularjs 中动态创建图表。问题是，Highcharts 没有找到渲染它的 div，尽管已经创建了。

<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/

提前谢谢了！

4

2 回答 2

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.

当你不应该传递“#”时，你正在传递。

仅供参考 - 您使用 Angular 的方式并不适合使用。你永远不应该在控制器中进行 DOM 操作。图表应该是一个指令。

编辑：将您的小提琴更新为更像它应该的样子：http: //jsfiddle.net/bRNZV/4/

于 2013-10-15T13:30:42.710 回答
0

renderTo 将不包含#。

 renderTo: "#" + name

替换为：

renderTo: name

看演示

于 2013-10-15T13:31:51.297 回答