FLOT中的主刻度和次刻度

Question

一些绘图库，例如Python的matplotlib，具有主要和次要刻度线（相应的主要和次要网格线）的概念。我一直在寻找，但我认为FLOT中没有这个功能。似乎只有一类刻度线。是否可能创建如下所示的内容，如果可以，该如何实现？

例如，如下图所示，每1.0为一个主要刻度线，每0.2为一个次要刻度线。

- Mads Skjern

Answer 1

您说得对，flot本身不支持此功能。

为了复制您的绘图，我建议使用网格标记，在每个整数刻度处添加更粗的线条即可。

   $.plot("#placeholder", [ d1 ], {
      xaxis: {
       tickSize: 0.2 // regular tick at 0.2
      },
      grid: {
       markings: function (axes) {
        var markings = [];
        var xTicks = axes.xaxis.ticks;
        for (var i = 0; i < xTicks.length; i++){ // loop all the ticks and add a black line at each whole number
          if (xTicks[i].v % 1 === 0){
            markings.push({ xaxis: { from: xTicks[i].v - 0.005, to: xTicks[i].v + 0.005 }, color: 'black' });
          }
        }
        return markings;
    }
  }
});

生成结果（例如这里）：

- Mark

Answer 2

如果有人想在所需的次刻度分区添加自己的未标记的次刻度线，可以这样做。（默认次刻度线为5，不易被覆盖）我的数据以时间为基础，显示了两年，每三个月有一个标记。

xaxis: {
mode: "time",
    timeformat: "%b %Y",
    minTickSize: [3, "month"],
    showMinorTicks:false,
},
grid: {
markings: function (axes) {
    var markings = [];
    var month_time= 2629700; // year in seconds divided by 12
    var offset=0;
    var linespread=36000; // set line thickness
    var xTicks = axes.xaxis.ticks;
    for (var i = 0; i < xTicks.length; i++){ 
        // loop all the ticks and add a dark line at each main group 
        markings.push({ xaxis: { from: xTicks[i].v  - linespread, to: xTicks[i].v  + linespread }, color: '#aaa' });
        for (var k = 1; k < 3; k++){
            //use subdvision to add minor ticks
            offset=month_time*k;
            markings.push({ xaxis: { from: xTicks[i].v + offset - linespread, to: xTicks[i].v + offset + linespread }, color: '#ddf' });
        }
    }
    return markings;
}

}

- anoldermark