Question

我得到了一个漂亮的图表，显示了一条温度值线。但我不知道如何为JSON输出中也包括的湿度值添加第二行。

我使用getJSON(url,...)以JSON格式获取数据，例如[时间戳，温度，湿度]：

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

这是我的图表，其中只有一条温度线：

这是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响应

解决方案

    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"
    }

Answer 1

通过在object数组中创建类型为option.series的新元素来添加另一行。

例如：

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

您可以检查一行多于here的示例。

编辑

首先，您应该为温度数据分配一个数组数组，而您只应获取每个数组的第二个元素并使用它创建温度数据。

根据您的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
    }

现在，您需要对湿度进行相同的操作，但应从每个信息数组中推入第三个元素（第二个索引）。

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"
    }

随时进行控制台操作。记录温度和湿度数组，以检查它们的外观。

在图表中添加第二条线

1 个答案: