0

これはマルチパートの質問ですので、質問が長くなるのをお許しください。

患者の身長、体重、BMI を複数の日付の個別の系列としてプロットするグラフを作成しようとしています。サーバーに移行する前に、テスト目的で CSV を使用してデータを取得したいと考えています。このFIDDLEと同様に機能させようとしていますが、これまでのところ成功していません。

これは、データがハードコードされた私のコードの 1 つのバージョンです。

$(function () { 
    var options = {
        chart: {
            renderTo: 'container',
            type: 'line'
        },
        title: {
            text: 'Patient Measurements'
        },
        xAxis: {
            categories: []
        },
        yAxis: {
            title: {
                text: 'Measurements'
            }
        },
        series: []
    };

    var data = "ID,PATIENT_NAME,DATA_DATE,HEIGHT,WEIGHT,BMI\n" +
               "1,\"Doe,John\",1/1/2013 00:00:00,65,185,30.78224852\n" +
               "1,\"Doe,John\",1/2/2013 00:00:00,65,184,30.61585799\n" +
               "1,\"Doe,John\",2/1/2013 00:00:00,65,181,30.11668639\n" +
               "1,\"Doe,John\",2/2/2013 00:00:00,65,180,29.95029585\n"

    // Split the lines
    var lines = data.split('\n');
    var first = lines.shift().split(',');
    var series_holder = [];
    for (var = i, i < first.length, i++) {
        var s = {
            data: []
        };
        series_holder.push(s);
    }

    $.each (lines, function(lineNo, line) {
        var items = line.split(',');

        $.each (items, function(itemNo, item){
            // If itemNo is the row/column iteration object, then start at column 2
            if (itemNo >= 2) {
                // Subtract the column from the itemNo to get a zero-based series_holder
                series_holder[itemNo - 2].data.push(parseFloat(item));
            }
        });
    });
    options.series = series_holder;

    var chart = new Highcharts.Chart(options);
});

この例では、3 つの線 (身長、体重、BMI に 1 つ) をそれぞれ 4 つのデータ ポイント (日付ごと) でプロットする必要があります。

私の例のデータがハイチャートの推奨事項に基づいてフォーマットされていないことはわかっていますが、CSV から ID フィールドと PATIENT_NAME フィールドを取得し、シリーズのツールチップで使用できるようにする必要があります。カーソルを合わせたデータポイントに関係なく、患者。これをページ上のDIVまたは何かに表示するだけでよいことは理解していますが、これを機能させる方法を理解できれば、ツールチップに表示できる他のものについてのアイデアがあるため、これを実行できるようにしたかったのです.

Highcharts サイトを確認したところ、CSV 用のコードを実装するために必要なことは、上記のコードのvar data = "..."の代わりに次のコードを追加することだけだと思います。

$.get(inputData, function(data) {
    // Check for data
    if (data.value != "") {
        alert("No data to retrieve!");
        return(0);
    }

私は Javascript、jQuery、または Highcharts に精通しているわけではありませんが、すばやく習得できるように最善を尽くしています。私のコードには多くの間違いがある可能性があることを認識しています (浮動小数点以外のデータ型の parseFloat のように意図的なものもあり、さまざまなデータ型を処理/解析する方法を学ぶことができます)、皆さんの忍耐に感謝します。

ご協力いただきありがとうございます。私はこれでもう少し遊んでいて、データがどのように処理されるかを判断するために多くのデバッグを行った後、次のコードを思いつきました。これは、私の主張をよりよく理解するための単純化されたバージョンかもしれないと思いました.

$(function () { 
var options = {
    chart: {
        renderTo: 'container',
        type: 'line'
    },
    title: {
        text: 'Patient Measurements'
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: 'Measurements'
        }
    },
    series: []
};

var data = "ID;PATIENT_NAME;DATA_DATE;AVG_HEIGHT;AVG_WEIGHT;BMI;WEIGHT_STATUS\n"+"1;DOE,JOHN;2012-12-29 00:00:00;65;185;30.7822485207101;Obese\n"+"1;DOE,JOHN;2013-01-12 00:00:00;65;184;30.6158579881657;Obese\n"+"1;DOE,JOHN;2013-02-09 00:00:00;65;181;30.1166863905325;Obese\n";
// Split the lines
var lines = data.split('\n');
var first = lines.shift().split(';');
var series_holder = [];
$.each (lines, function(lineNo, line) {
    var items = line.split(';');
    $.each(items, function(itemNo, item) {
        if (itemNo == 3) {
            options.xAxis.categories.push(item);
        }
        else if (itemNo > 3 && itemNo < 7) {
            series_holder[itemNo-4].data.push(parseFloat(item));
        }
    });
});      

for (var i = 4; i < first.length - 1; i++) {
    var s = {
        data: []
    };

    s.name = first[i].replace(/AVG_/g,"");
    series_holder.push(s);
}

var chart = new Highcharts.Chart(options);

});

x 軸は、DATE_DATE の下の日付値である必要があります。

シリーズ/ラインは次のとおりです。

  1. 身長
  2. 重さ
  3. BMI

プロット ポイントのデータは、ヘッダー行の後の列インデックス 4 (AVG_HEIGHT) から 6 (BMI) にあります。

これは、私がやりたいことに似た、私が仕事をするようになったサンプルのフィドルです...私は自分の特定のデータに対してそれを機能させることができません。

今のところ、質問のツールチップと CSV の部分は保留します。私は自分の何かを機能させたいので、正しい軌道に乗っていることを知っています。

4

1 に答える 1

0

これは完全な答えではありませんが、より多くのヒントです。Highchartsには、開始する必要のあるcsvデータの解析を処理するプラグイン（modules / data.src.js）があります。列名をシリーズ名として自動的に使用し、列のタイプ（日時/番号/カテゴリ）を推測しようとします。

githubのsrcとjsfiddleのデモ例を見てください：

$('#container1').highcharts({
    data: {
        csv: document.getElementById('csv1').innerHTML
    },
    title: {
        text: 'Categorized CSV data'
    }
});
于 2013-02-12T11:30:39.847 に答える