jQuery Flot跳过x轴值

Question

我阅读了Flot的大部分文档，但没有找到任何相关内容。

目前我的flot图表如下：

由于中间行没有数据，我希望能够隐藏它，但仍然显示第一个和最后两个x轴列的数据。

我定义x轴值的方法如下：

var options = [{[1, '1-1-2013'], [2, '1-4-2013'], [3, '1-7-2013'], 
[4, '1-10-2013'], [5, '1-1-2014']}];

并且工作正常，因为我根据每个元素的第一个数字绘制数据值，这是某种日期的ID。

为了更好地解释它，我希望我的图形看起来像这样粗糙：

Answer 1

您可以手动更改数据系列以省略所有空值，但您还必须手动指定刻度线（和标签）。

例如，如果您的数据类似于

data = [
    ['1-1-2013', 2.5],
    ['1-2-2013', 2.0],
    ['1-3-2013', 0.0],
    ['1-4-2013', 2.2]
];

然后您的数据将更改为

data = [
    [0, 2.5],
    [1, 2.0],
    [2, 2.2]
];

并且您的x轴刻度将是

ticks = [
    [0, '1-1-2013'],
    [1, '1-2-2013'],
    [2, '1-4-2013']
];

可能的代码：

var newdata = [];
var newticks = [];

function changeData(data) {
    $.each(data, function(index, element) {
        if (element[1] != 0.0) {
            newdata.push([ newdata.length, element[1] ]);
            newticks.push([ newticks.length, element[0] ]);
        }
    });
}

Answer 2

如果值为零，则可以使用tick for-matter函数返回null，同时指定tick数组，将空字符串传递给相应的值。

var ticks = [
          [1, '1-1-2013'], 
          [2, '1-4-2013'],
          [3, ''], 
          [4, '1-10-2013'], 
          [5, '1-1-2014']
];

或者

xaxis: {
     tickFormatter: function(v, axis) {
        if(v != 0) {
            return "<span class='axisLabel'>" + v + "%</span>";
        } else {
            return "";
        }
}