Question

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

所有内部灰线应在精确点处排列，以在ecg表上绘制完美的正方形。但是，有些线条间隔不均匀（它们彼此更接近），使得心电图背景不正确。

以下是我的代码所做的事情：

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

TICKS：我通过编写两个在x和y轴上生成刻度的函数来覆盖了Flot图表本机刻度生成器。在x轴上，每个40ms表示一个刻度线（一个灰色线），并且在y轴上，0.1毫伏表示一个灰色线。即使函数生成具有正确的刻度值的正确数组，flot图表上的刻度线间距也不均匀。一些刻度线间隔更紧密，这是不正确的。

并非所有刻度都被错误地绘制。但是，具有不规则间距的刻度在数量上是显着的，并且在仔细检查图形时可见。首先，图的第4列和行具有不均匀间隔的刻度线。（在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

差异：

 [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处划一条线。它必须在像素位置绘制，这些是整数值。那么，flot做什么？它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

差异：

 [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中的一个bug。但我无法看到flot如何能够更好地完成数学计算（并且仍能获得相同的效率）。

那么你如何解决它？

1。）增加画布的大小。刻度线之间的间距越大，您就无法在此处或那里看到像素。

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

<强> EDITS

这是尝试均匀地划分空间。它依赖于绘制两次绘图，因为我需要初始边界信息来开始间距（是否有边距，刻度标签等等）。它还要求我手动调整占位符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和标记以更好地可视化。

编辑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

flot chart ticks line not uniform

1 个答案: