javascript - 带有 ng-repeat 的 Angular Highcharts 图表列表

Question

我正在尝试构建一个 kpi 的应用程序并且我正在使用 angular js我想创建一个图表列表，每个列表项显示不同的值，每个列表项图表根据我的模型有不同的类型。

我基于 highcharts-ng 指令。

我想通过 highchart 指令注入(inject)一些属性，例如值、标题名称和图表类型当我输入以下 ng-repeat 时，由于 attrs，它会创建我的图表列表

     <li ng-repeat="li in list">
       <highchart config="chart" chartTitle="{{li.name}}" kpiValue="{{li.data}}">
       </highchart>
     </li>

你可以在这里找到我的代码 http://jsfiddle.net/Cp73s/62/

highcharts-ng 链接: https://github.com/pablojim/highcharts-ng

Answer 1

High 图表从 config 属性中获取选项。在你的情况下 chart 对象。

因为您想要不同图表的不同值。您必须根据需要创建的图表数量创建尽可能多的配置。

这是展示方法的 fiddle

http://jsfiddle.net/cmyworld/cSek7/

基本上，我创建了一个 Controller 来管理这些复杂性，并在 highChartController 中设置了初始对象设置。我只是为 title 属性做的，但想法是一样的。