javascript - 如何使用 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 编译 该 DOM，然后再将其附加到所需的元素。 $compile 服务将使绑定(bind)在该 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。