Добавить вторую строку на график - PullRequest
Новая
       3

Добавить вторую строку на график

0 голосов
/ 03 марта 2019

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

Я получаю данные в виде JSON, используя getJSON(url,...), например, [отметка времени, температура,влажность]: 

[[1551454476000, 22, 38.900001525878906], [1551454520000, 22, 38.900001525878906], [1551454530000, 22, 38.900001525878906], [1551454547000, 22, 38.900001525878906], ...

Это моя диаграмма с одной линией для температуры:

enter image description here Это HTML-код: 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Fleisch</title>
        <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="https://code.highcharts.com/highstock.js"></script>
        <script src="https://code.highcharts.com/highcharts-more.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/exporting.js"></script>
        <script src="https://code.highcharts.com/modules/export-data.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
        $.getJSON('http://127.0.0.1:5000/data.json', function(json) {
            var options =
            {
                chart: {
                    renderTo: 'container',
                    type: 'line'
                },
                title: {
                    text: 'Kuehlschrank',
                    x: -20 //center
                },
                xAxis: {
                    type:'datetime',
                    },
                yAxis: {
                    title: {
                        text: 'Temperatur'
                    }
                },
                series: [{
                    data: [],
                    type: 'line',
                    name: "Temperatur"
                    }]
            }

            options.series[0].data = json;

            var chart = new Highcharts.Chart(options);
        });
    }); 

        </script>
    </head>
    <body>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
    </body>
</html>

Я изо всех сил пытаюсь добавить вторую строку на том же графике для влажности. Любая помощь действительно приветствуется!

Обновление: ответ JSON

enter image description here

Решение 

    let humidity = [];
    let temperature = [];

    for(let i = 0; i < json.length; i++){
        temperature.push(json[i][1])
        humidity.push(json[i][2])
    }

    options.series[0] = {
        data: temperature,
        type: 'line',
        name: "Temperature"
    }

    options.series[1] = {
        data: humidity,
        type: 'line',
        name: "Humidity"
    }

1 Ответ

0 голосов
/ 03 марта 2019

Вы добавляете еще одну строку, создавая новый элемент типа object в своем массиве option.series.

Так, например: 

    option.series.push(
      {
         data: // insert your humidity data here
         type: 'line',
         name: "Humidity"
      }
    )

Пример можно проверить почем 1 строка здесь .

РЕДАКТИРОВАТЬ

Сначала вы назначаете массив массивов для ваших температурных данных, когда вы должны получать только второй элемент каждого массиваи создание ваших данных о температуре с ним.

Согласно скриншоту JSON, для правильного отображения температуры вы должны сделать следующее: 

let temperature = [];

    for(let i = 0; i < json.length; i++){
      temperature.push(json[i][1]) // push the second element of each array of information to my temperature arrays
    }

Теперь вам нужно сделать то же самое для вашей влажности, но вместо этого нажмите третий элемент (2-й указатель) из каждого массива информации. 

let humidity = [];

    for(let i = 0; i < json.length; i++){
      humidity.push(json[i][2]) // 
    }

Теперь у вас будут ваши массивы температуры и влажности.Затем вы можете легко назначить их для своей серии следующим образом. 

   options.series[0] = {
        data: temperature // here you insert the temperature array
        type: 'line',
        name: "Temperature"
    }
   options.series[1] = {
        data: humidity// here you insert the humidity array.
        type: 'line',
        name: "Humidity"
    }

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...