使用Angular js指令使用Highcharts渲染多个图表

Question

我在尝试使用Highcharts和AngularJS渲染多个图表时遇到问题。

我的代码基于这个小提琴：http://jsfiddle.net/csTzc/

我基本上只是复制了呈现图表的div：http://jsfiddle.net/CloudStrife91/b4vpP/

<div class="hc-pie" items="ideas"></div>
<div class="hc-pie" items="ideas2"></div>

正如您所看到的那样，第二个图表没有显示，而是模板div显示“不工作”

非常感谢您的帮助！

Answer 1

您需要更改在HighCharts的renderTo中提供元素的方式。

更改

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: "container",
      ...
    },
    ... 
  });

要

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: element[0],
      ...
    },
    ... 
  });

你还应该从模板中删除id="container"部分，你不需要它，就像我在评论中提到的那样，拥有多个具有相同id的元素是无效的html。< / p>

Here is an updated fiddle