2

1 日のエンジン ステータスを示す積み上げ棒グラフを作成する必要があります。これが私が欲しいものの例です：

ここに画像の説明を入力

ガント チャートのように見えますが、おそらく通常のガント チャートよりもはるかに単純です。この種のグラフをサポートする JavaScript/jQuery グラフ ライブラリを探しています。利用可能なガント チャート ライブラリがたくさんあることは知っていますが、どのライブラリに必要なチャートのオプション/設定があるのか​​疑問に思っています。

私のデータは次の形式になります。

[
    {
        "day": "2009-07-13",
        "work": ["11:16:35-12:03:12", "12:32:48-13:26:28", "13:39:09-13:39:12", "13:41:03-13:41:05", "14:18:09-24:00:00"]
    }, {
        "day": "2009-07-14",
        "work": ["00:00:00-07:22:25", "07:22:25-07:22:28", "10:10:04-10:10:31", "10:10:32-10:15:33", "10:18:07-10:21:19", "11:04:49-11:06:15", "11:12:50-11:19:05", "11:19:11-11:19:19", "11:45:50-11:51:42", "11:51:43-11:53:55", "14:03:13-14:13:04", "14:23:55-14:31:28", "14:31:28-14:38:00", "14:38:00-14:49:04", "16:34:56-16:44:33", "16:46:37-16:48:10", "16:48:11-24:00:00"]
    }, {
        "day": "2009-07-15",
        "work": ["00:00:00-08:16:23", "09:57:57-10:15:05"]
    }, {
        "day": "2009-07-16",
        "work": ["10:02:40-10:05:56", "10:07:16-10:09:26", "10:09:27-10:09:28", "13:18:31-24:00:00"]
    }, {
        "day": "2009-07-17",
        "work": ["00:00:00-08:56:41", "16:07:58-16:08:23"]
    }, {
        "day": "2009-07-20",
        "work": ["14:44:47-14:48:35", "15:09:14-16:47:06", "16:47:05-16:47:10", "16:47:13-16:47:15", "16:47:16-16:47:20"]
    }, {
        "day": "2009-07-21",
        "work": ["10:52:51-16:37:07"]
    }, {
        "day": "2009-07-24",
        "work": ["14:54:38-16:03:07", "16:16:23-16:35:14", "16:35:17-16:41:22", "16:43:37-23:56:37"]
    }, {
        "day": "2009-07-25",
        "work": ["20:36:34-21:24:28", "21:24:43-23:45:53"]
    }, {
        "day": "2009-07-26",
        "work": ["13:46:59-18:09:09"]
    }, {
        "day": "2009-07-28",
        "work": ["13:48:30-13:51:10", "13:51:18-13:51:27", "13:52:17-14:57:31"]
    }, {
        "day": "2009-07-29",
        "work": ["14:50:15-14:50:16", "15:36:17-15:43:51", "15:53:31-16:29:30", "16:57:50-23:07:28"]
    }, {
        "day": "2009-07-30",
        "work": ["11:25:29-11:41:32", "16:06:37-16:33:09", "21:14:04-21:20:18", "21:53:57-22:18:59"]
    }
]

work属性のタイム スロットはエンジンが作動している時間帯であり、workタイム スロット間のスロットはエンジンが停止している時間帯です。

これを長い間探していました。どんな提案でも大歓迎です！

4

3 に答える 3

0

JavaScript InfoVis Toolkitを使用するか、独自のカスタム レンダラーを作成できます。

おそらく、BarChart の例を変更して、時間を y 軸に表示することができます。

独自のコントロールを作成する場合は、Raphaelのようなライブラリが大いに役立ちます。

とにかく、非常に単純な制御のように見えるので、Flash や Silverlight などへの外部依存は必要ありません。

于 2012-08-03T06:25:11.283 に答える
0

jqplot のタイムライン機能に取り組んでいます。http://www.jqplot.com/

ここに例を示した JsFiddle があります: http://jsfiddle.net/NVbjv/8/

それはまだ進行中の作業であり、いくつかのことを理解する必要があります。詳細を知りたい場合は、stackoverflow で私の質問のいくつかをご覧ください。ある種のプラグインでそれを進化させたいと思っています。(ハイライター jqplotにpointlabel を表示し、y 軸に jqplot テキスト ラベルを表示します)

于 2012-08-03T07:31:58.103 に答える
0

見栄えの良いガント チャート プラグインを備えたFlotを試すことができます。

サンプルデータ:

var d1 = [
    [Date.UTC(2010, 0, 1, 11, 23), 5, Date.UTC(2010, 0, 1, 11, 25), "Put Water into Pot"],
    [Date.UTC(2010, 0, 1, 11, 35), 5, Date.UTC(2010, 0, 1, 11, 47), "Clean Cooker"],
    [Date.UTC(2010, 0, 1, 11, 25), 4, Date.UTC(2010, 0, 1, 11, 27), "Put Pot on Cooker"]
]

プラグイン仕様から：

var data = [
    [Date.UTC(2010,0,25,12,45),1,Date.UTC(2010,0,25,13,15],"Name of Step"]
  • 最初のパラメーターは、ステップの開始です。
  • 2 番目はリソースの数です。
  • 3 つ目は、ステップの終了です。
  • 4 番目は、ステップの名前 (ツールチップに使用) を記述します。
于 2012-08-03T06:36:31.260 に答える