Как отобразить 2 сплошных датчика с помощью функции ng-repeat? - PullRequest
Новая
       5

Как отобразить 2 сплошных датчика с помощью функции ng-repeat?

0 голосов
/ 19 мая 2019

Я хочу создать 2 твердомера.Я пытаюсь использовать нг-повтор в HTML, в котором есть 2 данных.Таким образом, в соответствии с этим функция ng-repeat должна отображать 2 сплошных датчика, используя один и тот же div.Я использовал угловой foreach в angularjs, который получает 2 данных из базы данных.

Я хочу создать 2 твердотельных датчика.Я пытаюсь использовать нг-повтор в HTML, в котором есть 2 данных.Таким образом, в соответствии с этим функция ng-repeat должна отображать 2 сплошных датчика, используя один и тот же div.Я использовал угловой foreach в angularjs, который получает 2 данных из базы данных.

Я уже пытался поместить весь код старшей диаграммы в 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,
                }]
            });
        }); 
    });     
}

1 Ответ

0 голосов
/ 20 мая 2019

Highcharts нужен уникальный контейнер для каждого графика, в противном случае он уничтожит первый график и отобразит второй в том же месте.

Таким образом, вы должны создать дочерние элементы внутри <div id="humidity_container"></div> с уникальным идентификатором.и построите каждый график внутри него.

Демонстрация:

...