在图表中添加第二条线答案

【问题标题】：Add second line to chart在图表中添加第二条线
【发布时间】：2019-03-03 16:54:10
【问题描述】：

我有一个漂亮的图表，显示温度值的一条线。但我不知道如何为也包含在 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"
    }

【问题讨论】：

标签： javascript json highcharts

【解决方案1】：

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

例如：

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

您可以查看超过 1 行 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"
    }

随意控制台记录温度和湿度数组以检查它们的样子。

【讨论】：

如何插入湿度数据？我不知道如何在Javascript中使用JSON数组中的第三个元素
就像您在示例 options.series[0].data = json; 中所做的一样。数据是一个array 的数字。你能告诉我你的 JSON 是什么样子的吗？
JSON 包含在问题中。见上文
JSON 来自响应，我无法从中获得结果，因为我无权访问 http://127.0.0.1:5000/data.json。
非常感谢您的帮助！