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 t4018/golang-long-func

中查找代码

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

正如我所说，我会在指令中创建图表，只会从控制器

传递系列

Answer 2

试试这个

var app = angular.module('myApp', []);
app.directive('hcChart', function () {
    return {
        restrict: 'E',
        template: '<div class="chart"></div>',
        scope: {
            options: '='
        },
        link: function (scope, element) {
            Highcharts.chart(element[0], scope.options);
        }
    };
});
app.controller('myCtrl', function ($scope) {
    
var seriesData =[{"name":"Times","data":[[1.5053472E12,20.0]]},{"name":"Prices","data":[[1.5053472E12,80.0]]},{"name":"Cleaner","data":[[1.5053472E12,40.0]]},{"name":"Other","data":[[1.5053472E12,40.0]]}];
$scope.list =[{
id:1,
name:'chart1'
},{
id:2,
name:'chart2'
},{
id:3,
name:'chart3'
}]



 var timePeriod = 'day';
 
$scope.surveyResultChoice = {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: ''
                        },
                        yAxis: {
                            title: {
                                text: 'Selection per response [%]'
                            }
                        },
                        xAxis: [{
                            type: "datetime",
                            title: {
                                text: null
                            },
                            dateTimeLabelFormats: {
                                month: "%e.%b<br/>%a"
                            }
                        }],
                        series: seriesData,
                        plotOptions: {
                      column: {
                          stacking: 'normal'
                      }
                  },

                     tooltip: {
                shared: true,
                formatter: function() {
                    var tooltipText = '<span style="font-size:smaller;">' +
                            Highcharts.dateFormat('%A, %b %e, %Y', this.x) +
                            '</span><br/>';
                    $.each(this.points, function(i, series) {
                        tooltipText += '<span style="color:' +
                            this.series.color +
                            '">' +
                            this.series.name +
                            '</span>: <b>' +
                            Highcharts.numberFormat(this.y, 0) +
                            '%</b><br/>';
                    });
                    return tooltipText;
                }
            }

                    }
});

<div ng-controller="myCtrl">
<div ng-repeat ="data in list">
{{data.name}}

      <hc-chart options="surveyResultChoice" class="chart" >Placeholder for generic chart</hc-chart>
      </div>

以下是fiddle

如何在ng-repeat中生成多个高图表

2 个答案: