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 tick计算。我尝试将min / max设置为等于数据集的开始和结束时间，但我没有图表。

我停止使用“时间”模式，希望我可以使用ticks数组并强制使用一组刻度和标签，但这不起作用。我尝试使用tickFormatter来强制计算滴答，但这也不起作用。

你可以看到我在xaxis上尝试过的所有内容并且已经注释掉了。我实际上不希望刻度与实际数据有任何关系。我在小时和分钟级别测试此图表，因此理论上我的数据集是9或540位的粒度信息。我仍然希望xaxis刻度保持均匀分布的固定9个值。我有什么想法可以做到这一点？

仅供参考，我为没有jsfiddle而道歉。我从来没有能够找到工作。

更新。选定的答案有效！这是分钟级别的540数据点的屏幕截图。数据集太大而无法发布。再次感谢Raidri

Answer 1

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

flot xaxis ticks用于堆叠的水平条形图比例

1 个答案: