0

ユーザーが入力した睡眠データを表示するグラフを作成する必要があります。ユーザーは、開始日時と終了日時、および品質の数値を入力します。グラフの y 軸は、01:00 PM (最小) から 12:59 PM (最大) までの時間である必要があります。x 軸は、「2015 年 1 月 1 日 - 2015 年 1 月 2 日」のように、睡眠が発生した日付でなければなりません (これは、1 つの「ポイント」の目盛りラベルです) (説明については、フィドルを参照してください)。最後に、「ポイント」は睡眠の質の値に基づいて色分けされます。使用されているデータは次のようにフォーマットされています。 

{  
    fromDate: "01/18/2015 22:15:00",  
    toDate: "01/19/2015 06:15:00",  
    value: 7  
}

私が抱えている問題は、これらすべてを正しく連携させることです。columnrange グラフでは、カテゴリ x 軸を使用する必要があるようです。これは、datetime の x 軸と同じようには機能しないのではないかと思います。特に、より大きなデータ セットではそうです。

私はフィドルを作成しました。それは私が必要とするものの正しい軌道に乗っていますが、ご覧のとおり、いくつかの問題があります。2. columnrange は、ここで目的を達成するための正しいグラフ タイプですか? 3. 睡眠の質の値と日時の範囲で書式設定されたツールチップを取得するにはどうすればよいですか? (明示的なカテゴリを追加しようとしましたが、x 軸が台無しになりました。[目盛りラベルが消えました])

ある機能を追加しようとすると、別の機能が誤動作し始めるようです。

http://jsfiddle.net/XBmB5/59/

このグラフに関するガイダンスをいただければ幸いです。

4

1 に答える 1

1

「columnrange グラフでは、カテゴリ x 軸を使用する必要があるようです」

この場合、x 軸と y 軸の両方に日時軸を使用できます。

Exampleここ：

重要なことは

1) y 軸については、時間だけが必要なため、基準日を設定する必要があり、それらの基準日に時間の詳細を追加できます (例の上部にある curDate/prevDate を参照してください)。

2) 軸ラベル、ツールチップ、dataLabels などのフォーマッターで dateFormat() メソッドを使用して、ラベルの書式設定を確立できます。

{{コメントで質問を編集

現地時間を取得するには、グローバル設定で useUTC を false に設定します。

Highcharts.setOptions({
        global:{
            useUTC: false
        }
    });

凡例を以前のように設定するには、以前の系列構造に戻すだけです。

私の例では、便宜上単純化しましたが、各データ ポイントが適切に定義されている限り、私のセットアップのようにすべて 1 つのシリーズであっても、最初のセットアップのように複数のシリーズであっても、違いはありません。

于 2015-01-19T17:04:34.030 に答える