在Flot Js中的x轴数据的每个点之间设置相同的间隙 [英] Set same gap between each point of x axis data in Flot Js

问题描述

我的图如下:

我希望在float中的每个点之间保持相同的距离，因为我想同时仅显示6个数据. 因此，我可以管理x轴数据的外观. 现在，这看起来不太好. 您可以给我另一个使x轴标签值看起来不错的解决方案.

I want to make an same gap between each point in flot because I want to show only 6 data at the same time. So I can manage the look of my x axis data. Right now this is not looking good. You can give me another solution for making an x axis label values looking good.

推荐答案

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

The easiest way to display linear x values in flot is to provide flot with an ascending index then use this index combined with a custom label function to display whatever string you want as the x axis label. The code to do this looks like the following:

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');
        }
      }
    });
});

在此示例中，我使用矩来设置随机日期的格式并将其按顺序放置在x轴上.您会注意到，由于日期是完全随机的，因此它们甚至可能不是连续的，而是均等间隔的.如果您想要小提琴版本请参见此处.祝你好运！

In this example I'm using moment to format a random date and place these in order on the x axis. You'll note that since the dates are completely random they may not even be sequential yet they are all evenly spaced. If you want the fiddle version see here. Best of luck!

这篇关于在Flot Js中的x轴数据的每个点之间设置相同的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！