javascript - データベース付きのハイチャート複数シリーズ

原文 javascript database highcharts

問題を解決する別のスレッドが見つからないので、助けを求めます。 HighChartsを使用して、ローカルデータベースに保存された温度と湿度の値を含む1つのグラフをレンダリングしています。各値には、そのタイプ(tempまたはhumi)、測定を行ったセンサー、いつ取得されたかを知るdatetime、および実際の温度と湿度の値を計算する係数のIDが付属しています。
各シリーズがセンサーであり、センサーがデータベースに保存した2種類の値を含むチャートをレンダリングしたいもの。
データベースには、同じ日時の24の温度と24の湿度を持つセンサーを最大24個使用できます

最初に、いくつかのオブジェクト定義を実行してHighChartsで直接使用できるかどうかわからないので、今のところ、たくさんの配列があります。
シリーズオプションの仕組みがわかりません。たくさんのことがあり、迷っています。 C++からJSとPHPに切り替えたばかりなので、習慣を変えるのは難しいです^^

ここにテーブルをアップロードできませんが、ホストできますhere

1つのグラフだけを作成することができない場合、2つのグラフを作成できます。1つは温度で、1つは湿度で(タブのように)実行されます。

ありがとうございました :)



編集:これはチャートをテストするための私のJSONです:

{"type":["temp"、 "humi"、 "temp"、 "humi"、 "temp"、 "humi"、 "temp"、 "humi"]、 "capteur":["1"、 "1 "、" 3 "、" 3 "、" 1 "、" 1 "、" 3 "、" 3 "]、" date ":[" 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 "]}

ここで、JSONを必要な配列に変換するJS関数:

function adjustData(data):

    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);
答え
Sebastian Bochanのおかげで、JSONデータを出力するPHPファイルからダウンロードしたデータでHighChartsを使用できるようになりました。

その方法で、配列内のJSONデータを解析する必要があります。
data:{ temp:{ [datetime, value], ...}, humi:{ [datetime, value], ...}};
x軸は日時で、y軸はセンサーから報告された値です。

グラフでは、chart.addSeries({name: name[i], data: data[i]});ループでforを実行します。chartは設定するグラフ、nameは各系列の名前の配列、data[datetime, value]の配列です> tempまたはhumi配列と同様。
関連記事

javascript - GoogleマップがAndroidエミュレーターイオンフレームワーク(navigator.geolocation.getCurrentPosition)で機能しない

javascript - Googleドキュメントでホストされているファイルからのマークダウンの読み取り

javascript - div内に垂直線を追加する最も実用的な方法は何ですか?

javascript - 別のページからbutton.clickイベントをトリガーする

javascript - Jqueryで個別のアイテムをプッシュする[重複]

javascript - 1つの関数が実行された後にjquery関数を実行する

javascript - AngularJS:モデル値の切り替えはUIに影響しません

javascript - アニメーションの完了後にjquery関数を実行するにはどうすればよいですか?

javascript - 毎回コマンドを実行せずにCSSの変更を確認する方法

javascript - Jqueryで読み込まれたページのURLを変更する