从 JSON / MySQL 数据生成 highcharts 多折线图答案

【问题标题】：Produce highcharts multiple line chart from JSON / MySQL data从 JSON / MySQL 数据生成 highcharts 多折线图
【发布时间】：2021-05-25 16:33:02
【问题描述】：

首先我道歉，我不是程序员（但我正在学习 - 慢慢地）。我对园艺应用的图表很感兴趣。根据 select 语句，我有一个每小时从传感器获取数据的数据库，查询获取最后 12 到 48 个读数。在您论坛的帮助下，我创建了 3 个文件，它们一起从 MySQL 中提取数据以绘制具有多个系列的图形：时间戳（具有各种显示选项）、温度和湿度。

我的工作基于小提琴 https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-basic 中的这个示例，它使用“在脚本中”提供的数据，但三周后我无法从 JSON 注入数据

我的第一个文件建立 MySQL db 连接，第二个文件提取数据并将其格式化为 JSON 数据，第三个文件应该创建图形但没有:-(。

this is what is produced 每行都有一个系列标签，而不是每个系列都有一行。

你能帮帮我吗？我想要一个显示温度和湿度的折线图。沿底部 x 轴的时间/日期，左侧 y 轴温度（以度为单位）和右侧 y 轴显示百分比湿度。我是不是要求太多了？

如果可能的话，最后我能否请求不使用 Ajax 或除 php、html、JSON 和 javascripts 之外的其他“东西”？

任何关于格式化我的问题的帮助将不胜感激:-)

<?php $json_data = include ('nw_database02.php');?> 
<!DOCTYPE HTML>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Line Graph</title>

    </head>
    <body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>

<div id="container"></div>

<script type="text/javascript">

Highcharts.chart('container', {
 
    title: {
        text: 'Temperature and Humidity'
    },

    subtitle: {
        text: 'Source: Greenhouse1'
    },

    yAxis: {
        title: {
            text: 'Temperature'
        }
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: <?= $json_data?> ,


    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});
</script>
</body>
</html>

...

如果我回显 $json_data 我会得到这种类型的结果，但请记住它是动态数据并且每小时都会更改，因此每次访问页面时都必须从 json_data 读取它：

[{"时间戳":"10:04 02/01/21","温度":"5","湿度":"66"},{"时间戳":"10:19 02/01/ 21","温度":"6","湿度":"65"},{"时间戳":"10:35 02/01/21","温度":"6","湿度":"64 "},{"时间戳":"10:50 02/01/21","温度":"6","湿度":"64"},{"时间戳":"11:06 02/01/21 ","温度":"6","湿度":"64"},{"时间戳":"11:21 02/01/21","温度":"7","湿度":"63" },{"时间戳":"11:34 02/01/21","温度":"10","湿度":"66"},{"时间戳":"04:21 02/01/21" ,"温度":"15","湿度":"64"},{"时间戳":"02/01/21","温度":"16","湿度":"61"} ,{"时间戳":"04:51 02/01/21","温度":"15","湿度":"59"},{"时间戳":"05:07 02/01/21", "温度":"15","湿度":"60"},{"时间戳":"05:22 02/01/21","温度":"14","湿度":"61"}]

【问题讨论】：

标签： php mysql json highcharts

【解决方案1】：

您需要将数据格式化为 Highcharts 所需的系列结构。其余要求可通过使用图表选项来实现 - 请检查 API 中的 xAxis 和 yAxis 属性。

var data = <?= $json_data?>

var series = [{
        name: "temperature",
        data: []
    },
    {
        name: "humidity",
        data: [],
        yAxis: 1
    }
];

data.forEach(function(dataEl) {
    series[0].data.push([
        new Date(dataEl.Timestamp).getTime(),
        Number(dataEl.temperature)
    ]);
    series[1].data.push([
        new Date(dataEl.Timestamp).getTime(),
        Number(dataEl.humidity)
    ]);
});

Highcharts.chart('container', {
    series: series,
    yAxis: [{
            title: {
                text: 'temperature'
            }
        },
        {
            title: {
                text: 'humidity'
            },
            opposite: true
        }
    ],
    xAxis: {
        type: 'datetime'
    }
});

现场演示： http://jsfiddle.net/BlackLabel/aw95vek6/

API 参考： https://api.highcharts.com/highcharts/series.line.data

【讨论】：

太棒了，非常感谢 - 第一次工作。我现在唯一的问题是正确设置 x 轴日期/时间，尤其是当几天内有 24 个或更多结果时 - 有什么想法吗？我也有一个问题，将 json 数据格式化为常规日期时间，而不是 Microsoft 的 "Timestamp":"10:04 02\/01\/21" - 我更喜欢 "Timestamp":"10:04 02/01/21 " 再次感谢 Huggie Duggie
嗨@HuggieDuggie，你能提供一个有问题的数据的例子吗？
感谢 ppotaczek、subbu ravi 和 Bhesh Gurung，我现在得到了我需要的所有答案并生成了我正在寻找的图表。 Y 轴，左侧显示温度，右侧显示湿度。图表显示每个点的数据，现在 x 轴显示与数据对应的日期和时间。格式化 x 轴的最后一部分来自 Bhesh Gurung：stackoverflow.com/questions/7101464/…。所以，再次感谢我收到 Huggie Duggie 的善意帮助，有一天我也将能够编程 :-)

【解决方案2】：

您可以使用下面的代码来实现，但是当您选择图表时，首先要知道目的并根据该系列创建 json 数据，免费使用 apexcharts

<script type="text/javascript">
    var data=[{"Timestamp":"10:04 02/01/21","temperature":"5","humidity":"66"},{"Timestamp":"10:19 02/01/21","temperature":"6","humidity":"65"},{"Timestamp":"10:35 02/01/21","temperature":"6","humidity":"64"},{"Timestamp":"10:50 02/01/21","temperature":"6","humidity":"64"},{"Timestamp":"11:06 02/01/21","temperature":"6","humidity":"64"},{"Timestamp":"11:21 02/01/21","temperature":"7","humidity":"63"},{"Timestamp":"11:34 02/01/21","temperature":"10","humidity":"66"},{"Timestamp":"04:21 02/01/21","temperature":"15","humidity":"64"},{"Timestamp":"04:36 02/01/21","temperature":"16","humidity":"61"},{"Timestamp":"04:51 02/01/21","temperature":"15","humidity":"59"},{"Timestamp":"05:07 02/01/21","temperature":"15","humidity":"60"},{"Timestamp":"05:22 02/01/21","temperature":"14","humidity":"61"}];
   console.log(data);
   var timestamp=[];
   var temperature=[];
   var humidity=[];
   $.each(data, function(i, item) {
   console.log(data[i]);
    timestamp.push(data[i].Timestamp);
    temperature.push(data[i].temperature);
    humidity.push(data[i].humidity);
   
});

 Highcharts.chart('container', {

  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
  },

  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },

  yAxis: {
    title: {
      text: 'Number of Employees'
    }
  },

  xAxis: {
     categories: timestamp,
  },

  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },

  series: [{
    name: 'temperature',
    data: temperature
  }, {
    name: 'humidity',
    data: humidity
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }

});

</script>

【讨论】：

非常感谢您的回答。很抱歉，您在 var data=[{"Timestamp .... 但 $json_data 是动态的，每次访问页面时都会更改。在那里，但我正在寻找类似 var data=[$json_data..] 的答案，它读取当时的数据，然后从最新的 json_data 创建图形。此外，它使用不回答有关轴的问题和我的代码中使用的标题还是来自数据？你能再试一次吗？谢谢
再次嗨 - 我使用 var data = = $json_data?> 尝试了你的方法，但我无法让它工作，有什么想法吗？非常感谢您的帮助，Huggie Duggie