javascript - jQuery Flot 跳过 x 轴值

Question

我通读了 Flot 的大部分文档，但并没有真正找到任何相关的东西。

目前我的浮动图如下所示：

并且由于中间行没有数据，我希望能够隐藏它，但仍然显示来自第一个和最后 2 个 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

You either can use tick for-matter function to return null if value is zero else while specifying tick array, pass empty string for corresponding value.

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

Or

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