Flot Js中x轴数据的每个点之间设置相同的间隙

Question

我的图表如下：

我想在flot中的每个点之间做一个相同的间隙，因为我想同时只显示6个数据。所以我可以管理我的 x 轴数据的外观。现在这看起来不太好。你可以给我另一个使 x 轴标签值看起来不错的解决方案。

Answer 1

在 flot 中显示线性 x 值的最简单方法是为 flot 提供升序索引，然后将此索引与自定义标签函数结合使用以显示您想要的任何字符串作为 x 轴标签。执行此操作的代码如下所示：

function randomDate() {
    var start = new Date(2012, 01, 01);
    var end = new Date();
    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}

$(function () {
    var theDates = [];
    var dataValues = [];

    for (var i = 0; i < 14; i += 0.5) {
        theDates.push(randomDate());
        dataValues.push([i, Math.sin(i)]);    
    }

    $.plot($("#placeholder"), [dataValues], {
        xaxis: {
        tickFormatter: function xAxisLabelGenerator(x) {
           return moment(theDates[x]).format('YYYY/MM/DD');
        }
      }
    });
});

在这个例子中，我使用 moment 来格式化一个随机日期并将它们按顺序放在 x 轴上。您会注意到，由于日期是完全随机的，它们甚至可能不是连续的，但它们都是均匀分布的。如果你想要 fiddle 版本 see here。祝你好运！

Answer 2

无论 x 值如何，都以固定距离设置数据在 Flot 中称为 categories mode。对于这种模式，您可以以这种形式提供数据，而无需单独提供报价：

var data = [
    ["2016-02-18 11:53:49 AM", 12, "<b>X</b> : 2016-02-18 11:53:49 AM |  <b>Y</b>: 12"],
    ...
]

查看此 fiddle 以获得完整的工作示例（顺便说一句：我将您在 fiddle 中使用的 flot.js 文件从 0.7 升级到 0.8.3）。

Flot Js中x轴数据的每个点之间设置相同的间隙

Set same gap between each point of x axis data in Flot Js

javascript

flot