flot图滴答线不统一

Question

我正在使用flot图来显示ecg信号。要求是图表背景应该看起来完全像ecg图表纸。

所有的内部灰线应该精确点排列绘制心电图表上的完美正方形。但是，有些线不均匀分布（它们彼此更接近），导致ecg图背景不正确。

这里是我的代码做什么：

标志： 我写了一个函数来生成对x和y轴标记。标记是图上的深粉色线条。这些标记将在4条灰线（它们组成较大的暗粉色框内的较小灰色方块）后在x和y轴上生成。这些似乎被正确绘制。

TICKS： 通过编写两个在x和y轴上生成滴答的函数，我重写了Flot图表本机滴答生成器。在x轴上，每40 ms代表一个刻度（一条灰线），y轴代表0.1毫伏代表一条灰线。即使函数生成具有正确值的滴答的正确数组，滴头图上的滴答间距也不是偶数。一些刻度线距离更近，这是不正确的。

并非所有的蜱都绘制不正确。但是，具有不规则间距的那些蜱的数量是显着的，并且在仔细检查图形时可见。首先，图的第四列和第一行有不均匀间隔的刻度线。 （在jsfiddle之外的浏览器上，这成为第3行和第3列）。这些不均匀的滴答在整个图表中随机重复。

我的代码如下所示。它也已被上传在JSFiddle

有没有人在绘制刻度线时经历了与flot图表类似的问题？我是否错误地使用了蜱？感谢您的帮助。

的JavaScript：

$(function() { 
     var d2=[]; 

     // Make markings on x and y axis for drawing the more spaced grid lines 
     function markingsArray(axes) { 
      var markings = []; 
      for (var x = 200; x < axes.xaxis.max; x += 200) 
       markings.push({ xaxis: { from: x, to: x },color: "#EE1983" }); 
      for (var y = -5; y < axes.yaxis.max; y += 0.5) 
       markings.push({ yaxis: { from: y, to: y },color: "#EE1983" }); 
      return markings; 
    } 

    var options = { 
     series: { 
      shadowSize: 0, // Drawing is faster without shadows 
      lines: { 
        lineWidth: 1, 
       } 
     }, 
     yaxis: { 
      ticks: function(axis){ 
       var res = []; 
       var tickDrawCounter = 1; 
       var tickIncrement=0.1; 
       for(var i=-4.9;i<5;i+=tickIncrement){ 
        if(tickDrawCounter<5){ 
         res.push([parseFloat(i).toFixed(1),""]); 
         tickDrawCounter++; 
       }else{ 
        tickDrawCounter=1; 
       } 
       } 
       return res; 
      }, 
      min: -5, 
      max: 5   
      }, 
     xaxis: { 
      ticks: function(axis) { 
       var res = []; 
       var tickDrawCounter = 1; 
       var tickIncrement=40; 
       for(var i=tickIncrement;i<8000;i+=tickIncrement){ 
        if(tickDrawCounter<5){ 
         res.push([parseFloat(i),""]); 
         tickDrawCounter++; 
       }else 
        tickDrawCounter=1; 
       } 
       return res; 
      }, 
      min:0, 
      max:8000, 
      }, 
     colors: ["#0000A0"], // color of the series plot 
     grid:{ 
      markings: markingsArray, 
      backgroundColor:"pink", 
      markingsLineWidth:1, 
      } 
    } 
    $.plot("#placeholder",[ d2],options); 

    // Add the Flot version string to the footer 

    $("#footer").prepend("Flot " + $.plot.version + " &ndash; "); 
} 


); 

Answer 1

真棒问题。

这里的您蜱的一些：

[1] -4.9 -4.8 -4.7 -4.6 -4.4 -4.3 -4.2 -4.1 -3.9 -3.8 -3.7 -3.6 -3.4 -3.3 -3.2 
[16] -3.1 -2.9 -2.8 -2.7 -2.6 -2.4 -2.3 -2.2 -2.1 -1.9 -1.8 -1.7 -1.6 -1.4 -1.3 

而这里的每个刻度线之间的区别：

[1] 0.1 0.1 0.1 0.2 0.1 0.1 0.1 0.2 0.1 0.1 0.1 0.2 0.1 0.1 0.1 0.2 0.1 0.1 0.1 
[20] 0.2 0.1 0.1 0.1 0.2 0.1 0.1 0.1 0.2 0.1 0.1 0.1 0.2 0.1 0.1 0.1 0.2 0.1 0.1 

这看起来不错，不错，间隔均匀。虽然flot内部必须将这些转换为画布坐标。在这里，他们是：

[1] 479.16 474.32 469.48 464.64 454.96 450.12 445.28 440.44 430.76 425.92 
[11] 421.08 416.24 406.56 401.72 396.88 392.04 382.36 377.52 372.68 367.84 

和Diff：

[1] -4.84 -4.84 -4.84 -9.68 -4.84 -4.84 -4.84 -9.68 -4.84 -4.84 -4.84 -9.68 
[13] -4.84 -4.84 -4.84 -9.68 -4.84 -4.84 -4.84 -9.68 -4.84 -4.84 -4.84 -9.68 

再次，看起来相当好，仍然很好地隔开。

但是我们遇到了问题，flot不能在479.16画线。它必须在像素位置绘制，这些是整数值。那么，弗洛特做了什么？它们是Math.floors。您的 “像素位置” 变为：

[1] 479 474 469 464 454 450 445 440 430 425 421 416 406 401 396 392 382 377 372 
[20] 367 358 353 348 343 333 329 324 319 309 304 300 295 285 280 275 271 261 256 

和Diff：

[1] -5 -5 -5 -10 -4 -5 -5 -10 -5 -4 -5 -10 -5 -5 -4 -10 -5 -5 -5 
[20] -9 -5 -5 -5 -10 -4 -5 -5 -10 -5 -4 -5 -10 -5 -5 -4 -10 -5 -5 
[39] -5 -9 -5 -5 -5 -10 -4 -5 -5 -10 -5 -4 -5 -10 -5 -5 -4 -10 -5 

现在我们有一个问题，没有更多的均匀间距。

所以，我的第一个直觉是说，哇，这是一个错误。但我看不出flot如何更好地进行数学运算（并且仍能获得相同的效率）。

那么你如何解决它？

1.）增加画布的大小。滴答与更多的间距，你将无法在这里或那里看到一个像素。

2.）工作背部。从像素位置开始，根据它们计算轴位置。如果我今晚得到一些时间，我会尝试这个想法。它不会很漂亮。

编辑

下面就来均匀地间隔开蜱的尝试。它需要两次绘制图形，因为我需要初始边界信息来开始间距（是否有边距，刻度标签等等）。它也要求我手动调整占位符DIV高度，使所有的蜱将适合：

ticks: function(axis){ 
    var startTickPos = -4.9; 
    var endTickPos = 5; 
    var tickIncrement = 0.1; 
    var tickDrawCounter = 2; 
    if (plot) { 
     // this is the re-draw 
     var yaxis = plot.getAxes().yaxis; 
     // our first tick's pixel position 
     var currentTickPix = yaxis.p2c(yaxis.ticks[0].v); 
     var ticks = [[startTickPos,""]]; 
     for(var i=startTickPos + tickIncrement; 
      i<endTickPos; 
      i+=tickIncrement){ 
      // we are spacing each tick 5 pixels apart, adjust as needed for get a good plot height 
      currentTickPix -= 5; 
      if(tickDrawCounter<5){ 
       // convert the pixel to tick position 
       ticks.push([yaxis.c2p(currentTickPix),""]); 
       tickDrawCounter += 1; 
      } else { 
       tickDrawCounter = 1; 
      } 
     } 
     return ticks; 
    } else { 
     // this is the first time through, we only need the initial tick's starting position 
     return [startTickPos]; 
    } 
}, 

这里有一个fiddle。我删除了xaxis和标记以更好地可视化。

EDIT 2

所以，原来最重要的部分是这里的情节高度。使用您的原始代码和510像素的绘图高度，蜱均匀分布。这是差异：

[1] -5 -5 -5 -10 -5 -5 -5 -10 -5 -5 -5 -10 -5 -5 -5 -10 -5 -5 -5 
[20] -10 -5 -5 -5 -10 -5 -5 -5 -10 -5 -5 -5 -10 -5 -5 -5 -10 -5 -5 
[39] -5 -10 -5 -5 -5 -10 -5 -5 -5 -10 -5 -5 -5 -10 -5 -5 -5 -10 -5 
[58] -5 -5 -10 -5 -5 -5 -10 -5 -5 -5 -10 -5 -5 -5 -10 -5 -5 -5 -10 
[77] -5 -5 -5