flot xaxis ticks 用于堆叠水平条形图刻度

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 小时的运行时间显示并放置整点的 x 轴标签（1:00、2:00 等）。

由于这是多个数据集的水平堆栈，这似乎确实混淆了 xaxis 刻度计算。我尝试将 min/max 设置为等于数据集的开始和结束时间，但我没有得到任何图表。

我停止使用 "time" 模式，希望我可以使用刻度数组并强制设置一组刻度和标签，但这不起作用。我尝试了 tickFormatter 来强制计算刻度，但这也没有用。

你可以看到我在xaxis上尝试过的所有东西都被注释掉了。我实际上不希望刻度与实际数据有任何关系。我在小时和分钟级别测试此图，因此理论上我的数据集是 9 位或 540 位的粒度信息。我仍然希望 xaxis 刻度保持在均匀分布的一组固定的 9 个值。我该怎么做？

仅供参考，对于没有 jsfiddle，我深表歉意。我从来没能让一个人工作。

更新。所选答案有效！这是一个 540 数据点到分钟级别的屏幕截图。数据集太大 post。再次感谢Raidri

Answer 1

我让它可以使用时间模式和垂直条形图：

flot xaxis ticks 用于堆叠水平条形图刻度

flot xaxis ticks for stacked horizontal bar chart scale

javascript

formatting

label

flot