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

Question

所以我想做的是当用户单击一个按钮时我想向页面添加一个新的 highchart 元素。目前我看到我的图表容器出现了，但图表没有。

这是我正在尝试做的事情：

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

您需要使用 $compile API compile DOM，然后再将其附加到所需的元素。 $compile 服务将使绑定在 DOM 上工作，范围在括号中指定，例如 ($scope).

代码

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

除了附加 DOM，您还可以考虑 ng-repeat 指令，它会根据提供给它的数组动态呈现 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 以显示和隐藏 highcharts DOM。

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

How to add a new Highchart dynamically using Highchartsng

javascript

jquery

highcharts

angularjs

highcharts-ng