Question

因此，我尝试做的是当用户点击按钮时我想在页面中添加新的高图元素。目前我看到我的图表容器显示但图表没有显示。

以下是我要做的事情：

//This config works when I statically load a graph
$scope.someConfig ={ options: {chart:{type:'pie'}}, title :{text: 'Test'}, series:[{data: [1,2,3,4]}]} 

angular.element($('myElement')).append{
"<div class='myContainerClass'>"+
  "<highchart config='config' style='height: 100%; width: 100%'>"+"<\highchart>"+
"</div>"
);

我还是很陌生，所以我想知道我做错了什么

任何建议都很棒！

谢谢〜

Answer 1

在将DOM附加到所需元素之前，您需要使用compile API $compile该DOM。 $compile服务将使用($scope)括号中指定的作用域对该DOM进行绑定。

<强>代码

var compiledDOM = $compile("<div class='myContainerClass'>"+
  "<highchart config='config' style='height: 100%; width: 100%'>"+"<\highchart>"+
"</div>")($scope)
angular.element($('myElement')).append(compiledDOM)

您可以考虑ng-repeat指令而不是附加DOM，它将根据提供给它的数组动态呈现DOM。基本上它会渲染html直到达到该数组长度。

所以在你的情况下你可以填充基本上是数组的charts对象。当用户添加新的chart时，将一个对象推送到charts对象，config部分将像charts.push({config: configObject})

<div ng-repeat="chart in charts" class='myContainerClass'>"+
      <highchart config='chart.config' style='height: 100%; width: 100%'><\highchart>
</div>

将标记showHighChart切换为显示＆amp;隐藏highcharts DOM。

如何使用Highchartsng动态添加新的Highchart

1 个答案: