Highcharts 带数据库的多个系列答案

【问题标题】：Highcharts Multiple series with databaseHighcharts 带数据库的多个系列
【发布时间】：2015-06-01 14:51:36
【问题描述】：

我寻求一些帮助，因为我找不到另一个线程来解决我的问题。我正在使用 HighCharts 渲染一个带有温度和湿度值的图表，保存在本地数据库中。每个值都带有它的类型（temp 或humi）、进行测量的传感器、datetime 以了解何时进行测量，以及用于计算实际温度和湿度值的系数 ID。我想要渲染一个图表，其中每个系列都是一个传感器，传感器保存在我的数据库中的两种类型的值。我可以在数据库中拥有多达 24 个具有 24 个温度和 24 个 Humis 且具有相同日期时间的传感器

首先我不知道我是否可以做一些对象定义来直接在 HighCharts 中使用它们，所以现在我有很多数组。我不明白系列选项的工作方式，有很多东西，我迷路了。我刚从 C++ 切换到 JS 和 PHP，所以我很难改变我的习惯 ^^

无法在此处上传我的表格，但我可以托管它here

如果不能只制作一张图表，我可以制作两张图表：一张包含温度，另一张包含湿度（比如标签？）。

谢谢你:)

编辑：这是我用来测试图表的 JSON：

{"type":["temp","humi","temp","humi","temp","humi","temp","humi"],"capteur":["1" ,"1","3","3","1","1","3","3"],"日期":["1432654910","1432654910","1432654910","1432654910" ,"1432742599","1432742599","1432742599","1432742599"],"valeur":["6626","1220","6357","1168","6782","1118","6329" ,"994"],"coeff":["0","0","0","0","0","0","0","0"]}

在这里我的 JS 函数将 JSON 转换为我需要的数组：

函数排列数据（数据）：

    var result = {
        "temp" : {
            "capteur" : [[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []], "date" : []
        }, 
        "humi" : {
            "capteur" : [[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []], "date" : []
        }
    };
    for(var i in data.type){
        if(data.type[i].localeCompare("temp") == 0){
            result.temp.capteur[data.capteur[i] - 1].push(data.valeur[i]);
            if(result.temp.date.length != 0){
                if(result.temp.date[result.temp.date.length - 1].getTime() != data.date[i] * 1000)
                    result.temp.date.push(new Date(data.date[i] * 1000));
            }
            else
                result.temp.date.push(new Date(data.date[i] * 1000));
        }
        else{
            result.humi.capteur[data.capteur[i] - 1].push(data.valeur[i]);
            if(result.humi.date.length != 0){
                if(result.humi.date[result.humi.date.length - 1].getTime() != data.date[i] * 1000)
                    result.humi.date.push(new Date(data.date[i] * 1000));
            }
            else
                result.humi.date.push(new Date(data.date[i] * 1000));
        }
    }
    console.log(result);
    return result;

我将“结果”传递给setChart，如下所示：

setChart(chart_temp, name, data.temp.date, data.temp.capteur);

【问题讨论】：

最简单的方法是准备任何从数据库获取数据并形成 JSON（通过 json_encode()）函数的脚本（如 php）。然后在 javascript 中，您可以使用 php 的 url 调用 $.getJSON() 并将数据分配给图表。
好的，我会这样做，但是我必须如何安排我的 json 以将它与 HighCharts 一起使用？ 1) 喜欢 [ [ 1, 2, 3 ... 24 ][ 2015-06-02, 2015-06-02 ... ] [ 6023, 6101 ... ] ... ] ？或 2) 喜欢 [ [1, 2015-06-02, 6023 ...][2, 2015-06-02, 6101] ...] ?
对于每个点，它应该是类似 [x,y] 的数组，其中 x 是时间戳（以毫秒为单位的时间），y 是值。
但我必须为 24 个传感器显示 24 行。如果每个传感器在我的图表中都是一个系列，我可以为每个传感器做 [x, y] 吗？
每个系列都包含点数据数组。每个点都需要是 x/y 值的数组。

标签： javascript database highcharts

【解决方案1】：

感谢 Sebastian Bochan，我现在可以对从输出 JSON 数据的 PHP 文件下载的数据使用 HighCharts。

我必须以这种方式解析数组中的 JSON 数据： data:{ temp:{ [datetime, value], ...}, humi:{ [datetime, value], ...}}; x 轴是日期时间，y 轴是我的传感器报告的值。

在图表中，我在for 循环中执行chart.addSeries({name: name[i], data: data[i]});，其中chart 是我要设置的图表，name 是每个系列的名称数组，data 是数组[datetime, value] 之类的 temp 或 humi 数组。

【讨论】：