堆叠水平条形图比例的浮动 xaxis 刻度

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);

我最终得到一个图表，其中 xaxis 标签与它们应有的不同。见下文

设计是机器的每小时状态（红色 = 未运行，绿色 = 运行等）因此目的是显示最后 9 小时的运行时间，并在小时的顶部放置 x 轴标签（ 1:00、2:00 等）。

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

我停止使用“时间”模式，希望我可以使用刻度数组并强制一组刻度和标签，但这不起作用。我尝试了 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。