如何在ng-repeat中生成多个high charts

Question

我可以生成一张图表。但是这里有一种情况我需要生成多个（一个或多个）图表。请用 ng-repeat 帮助我。

JSON 多个图表的数据

[
  {
    "id": 123,
    "seriesData": [
      {
        "name": "Times",
        "data": [
          [
            1505347200000,
            20
          ]
        ]
      },
      {
        "name": "Prices",
        "data": [
          [
            1505347200000,
            80
          ]
        ]
      },
      {
        "name": "Cleaner",
        "data": [
          [
            1505347200000,
            40
          ]
        ]
      },
      {
        "name": "Other",
        "data": [
          [
            1505347200000,
            40
          ]
        ]
      }
    ]
  },
  {
    "id": 123,
    "seriesData": [
      {
        "name": "Donut",
        "data": [
          [
            1505347200000,
            20
          ]
        ]
      },
      {
        "name": "Ice Cream",
        "data": [
          [
            1505347200000,
            20
          ]
        ]
      },
      {
        "name": "Tea",
        "data": [
          [
            1505347200000,
            40
          ]
        ]
      },
      {
        "name": "Coffee",
        "data": [
          [
            1505347200000,
            20
          ]
        ]
      }
    ]
  }
]

在jsfiddle中找到代码http://jsfiddle.net/TXJE6/273/

Answer 1

您只能在系列上写 ng-repeat，因为其他图表元数据不会更改：

<div ng-repeat="data in dataOfSeries">
  <hc-chart options="surveyResultChoice" 
            data="data" 
            class="chart" >Placeholder for generic chart</hc-chart>
</div>

您的指令将如下所示：

app.directive('hcChart', function () {
    return {
        restrict: 'E',
        template: '<div class="chart"></div>',
        scope: {
            chartOptions: '=',
            series: '='
        },
        link: function (scope, element) {

            scope.chartOptions.series = scope.series;

         Highcharts.chart(element[0], scope.chartOptions);
        }
    };
});

Fixed demo Fiddle

正如我边注，我会在指令中创建图表，并且只会从控制器传递系列

如何在ng-repeat中生成多个high charts

How to generate multiple high charts in ng-repeat

highcharts

angularjs

angularjs-ng-repeat