javascript - 使用 Angular js 指令使用 Highcharts 呈现多个图表

Question

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

我的代码基于这个 fiddle :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" 部分，您在那里不需要它，就像我在评论中提到的那样，具有 more than 元素的 html 无效相同的 ID。

Here is an updated fiddle