如何将ng-repeat和highcharts一起用于固体量表？

Question

我想创建2个实体表。我正在尝试在HTML中使用ng-repeat，其中有2个数据。因此，据此ng-repeat函数应使用相同的div显示2个固体量表。我在angularjs中使用angular foreach，它从数据库中获取2个数据。

我已经尝试将所有highchart代码放在foreach循环内的angularjs中，以便它将根据数据循环并获取相应的值。但是，我一次只能获取1个数据。

<div id="humidity_container"></div>


vm.GetTempHumidity = function () {
    var TempHumidityURL = url + "sensors/TempHumidity";
    $http.get(TempHumidityURL).then(function (response) {
        vm.TempHumidity = [];
        //vm.TempHumidityData = [];

        angular.forEach(response.data, function (value, key) {
            var obj = { SensorID: value.SensorID, SensorName: value.SensorName, Data1: value.Data.split(',')[0], Data2: value.Data.split(',')[1], SignalStrength: value.SignalStrength, Battery: value.Battery, InsertDate: moment(value.InsertDate).format('DD/MM/YYYY hh:mm A') };
            vm.TempHumidity.push(obj);
            vm.TempHumidityData = obj.Data1;  

            var rawData = vm.TempHumidityData,
                data = getData(rawData);

            console.log(vm.TempHumidityData);

            function getData(rawData) {
                var data = [],
                    start = Math.round(Math.floor(rawData / 10) * 10);
                data.push(rawData);
                for (i = start; i > 0; i -= 1) {
                    data.push({
                        y: i
                    });
                }
                return data;
            }

            Highcharts.chart('humidity_container', {
                chart: {
                    type: 'solidgauge',
                    marginTop: 0,
                    backgroundColor: 'transparent',
                    //height:150,
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: ''
                },

                subtitle: {
                    text: rawData + ' °C',
                    style: {
                        'font-size': '17px'
                    },
                    y: 103,

                },

                tooltip: {
                    enabled: true
                },

                pane: [{
                    startAngle: -90,
                    endAngle: 90,
                    background: [{ // Track for Move
                        outerRadius: '100%',
                        innerRadius: '60%',
                        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.1).get(),
                        borderWidth: 0,
                        shape: 'arc'
                    }],
                    size: '100%',
                    center: ['50%', '30%']
                }, {
                    startAngle: -180,
                    endAngle: 180,

                }],

                yAxis: [{

                    min: 0,
                    max: 100,
                    //tickInterval: 0,
                    labels: {
                        enabled: false
                    },

                    stops: [
                        [0, '#55F709'],
                        [0.1, '#0f0'],
                        [0.2, '#2d0'],
                        [0.3, '#4b0'],
                        [0.4, '#690'],
                        [0.5, '#870'],
                        [0.6, '#a50'],
                        [0.7, '#c30'],
                        [0.8, '#e10'],
                        [0.9, '#f03'],
                        [1, '#f06']
                    ]
                }],
                series: [{
                    animation: false,
                    dataLabels: {
                        enabled: false
                    },
                    color: Highcharts.getOptions().colors[0],
                    radius: '100%',
                    innerRadius: '60%',
                    data: data,

                }]
            });
        }); 

    }); 

}