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

Question

我的图表如下：

我想在flot中的每个点之间产生相同的差距，因为我想同时只显示6个数据。 所以我可以管理我的x轴数据的外观。 现在看起来并不好看。 您可以为我提供另一种解决方案，使x轴标签值看起来很好。

Answer 1

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

var jwt = require('express-jwt');    

var jwtCheck = jwt({
    secret: "secret"
});

router.get('/users', function(req, res) {
    jwtCheck(req, res, function() {
        var loggedUserId = _.get(req, 'user.id');
        ...
        //your rest code here
    });
});

在这个例子中，我使用时刻来格式化随机日期并将它们按顺序放在x轴上。你会注意到，由于日期是完全随机的，它们甚至可能不是连续的，但它们都是均匀间隔的。如果你想要小提琴版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以获取完整的工作示例（顺便说一下：我将您在小提琴中使用的flot.js文件从0.7升级到0.8.3）。