如何使用 ng-repeat 函数显示 2 个实体仪表？

Question

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

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

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

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

        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.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,
                }]
            });
        }); 
    });     
}

Answer 1

Highcharts 需要每个图表都有一个唯一的容器，否则，它会破坏第一个图表并在同一个地方渲染第二个图表。

因此您应该在 <div id="humidity_container"></div> 中创建具有唯一 ID 的子元素，并在其中绘制每个图表。

演示：

一个容器：https://jsfiddle.net/BlackLabel/qwpdbk39/
两个容器：https://jsfiddle.net/BlackLabel/z7axsh0g/

如何使用 ng-repeat 函数显示 2 个实体仪表？

How to display 2 solid gauge using ng-repeat function?

angularjs

highcharts

angularjs-ng-repeat