FLOT x軸は、私はここのサンプルで働いてい積み重ね横棒グラフスケール

Question

ためティック：

var startDate = new Date(Date.UTC(2016, 6, 28, 0, 0, 0, 0)); 
var endDate = new Date(Date.UTC(2016, 6, 28, 0, 0, 0, 0)); 
endDate.setHours(startDate.getHours() + 9); 

var dataSet = [{"data":[[1469664000000,0]],"color":"#FF0700"}, 
{"data":[[1469667600000,0]],"color":"#FF0700"}, 
{"data":[[1469671200000,0]],"color":"#FF0700"}, 
{"data":[[1469674800000,0]],"color":"#FF0700"}, 
{"data":[[1469678400000,0]],"color":"#FF0700"}, 
{"data":[[1469682000000,0]],"color":"#FF0700"}, 
{"data":[[1469685600000,0]],"color":"#FF0700"}, 
{"data":[[1469689200000,0]],"color":"#FF7400"}, 
{"data":[[1469692800000,0]],"color":"#006900"}]; 

var options = { 
series: { 
    stack: true, 
    bars: { 
     show: true 
    } 
}, 
bars: { 
    lineWidth: 0, 
    align: "center", 
    barWidth: 1, 
    horizontal: true, 
    fill: 1, 
}, 
yaxis: { 
    axisLabel: "MachineName", 
    axisLabelUseCanvas: true, 
    axisLabelFontSizePixels: 12, 
    axisLabelFontFamily: 'Verdana, Arial', 
    axisLabelPadding: 3, 
    ticks: [] 
}, 
xaxis: { 
    axisLabelUseCanvas: true, 
    axisLabelFontSizePixels: 12, 
    axisLabelFontFamily: 'Verdana, Arial', 
    axisLabelPadding: 3, 
    //ticks: [[0, "1:00"], [1, "2:00"], [2, "3:00"], [3, "4:00"], [4, "5:00"], [5, "6:00"], [6, "7:00"], [7, "8:00"], [8, "9:00"]], 
    //labelWidth: 10, 
    //tickLength: 10, 
    //tickFormatter: formatXAxis, 
    //tickSize: 360000, 
    //minTickSize: 1, 
    //min: 0, 
    //max: 10 
    //mode: "time", 
    //timeformat: "%H:%M", 
    //minTickSize: [1, "hour"], 
    ////color: "black", 
    //min: startDate.getTime(), 
    //max: endDate.getTime() 
} 
}; 

$.plot($("#machineStatus"), dataset, options); 

私は、x軸ラベルは、彼らがあるべきようなものではありませんグラフで終わります。以下を参照してください

デザインはマシンの時間単位のステータスです（赤=実行中、緑=実行中など）。最後の9時間のランタイムを表示して、 （1:00、2:00など）。

これは複数のデータセットの水平スタックなので、これは実際にはxaxisティック計算を混乱させるようです。私はmin/maxをデータセットの開始時刻と終了時刻に等しく設定しようとしましたが、グラフは表示されません。

私はtick配列を使用し、ダニとラベルのセットを強制することを望んで、 "time"モードの使用をやめましたが、それは動作しません。私はダンプの計算を強制するためにtickFormatterを試しましたが、それもうまくいきませんでした。

私はxaxisで試したすべてのことを見ることができ、コメントアウトしました。私は実際にダニに実際のデータとの関係を持たせたくありません。理論的には、私のデータセットは9または540ビットの細かい情報です。このグラフは時間と分のレベルでテストしています。私はまだxaxisのダニが均等に広がる9つの値の固定されたセットにとどまることを望みます。どのように私はそれを行うことができます任意のアイデア？

参考までに、私はjsfiddleがないことをお詫び申し上げます。私は決して働くことができませんでした。

更新。選択された回答が機能します！ここでは分レベルまでの540データポイントのスクリーンショットがあります。データセットが大きすぎて投稿できません。おかげで再びRaidri

Answer 1

は、私はそれが時間モードと縦棒グラフで動作するようになった：

関連するオプション：

series: { 
     stack: true, 
     bars: { 
      lineWidth: 0, 
      align: "left", 
      barWidth: 3600000, 
      //horizontal: true, 
      fill: 1, 
      show: true, 
     } 
    }, 
    ... 
    xaxis: { 
     min: startDate.valueOf(), 
     max: endDate.valueOf(), 
     mode: "time", 
     timeformat: "%H:%M", 
     ... 

また、あなたのための値データポイントは1に変更されているので、ここのバーは高さひとつの。 分数値に変更する場合は、それに応じてbarWidthオプションを変更する必要があります。

完全な例はfiddleを参照してください。