浮点图滴答线不均匀 [英] flot chart ticks lines not uniform
问题描述
我正在使用浮点图显示心电信号.要求是图表背景应该看起来与ecg座标纸完全一样.
I am using flot charts to display ecg signals. The requirement is that the chart background should look exactly like the ecg graph paper.
所有内部灰线应精确对齐，以在心电图板上绘制完美的正方形.但是，有些线的间距不均匀(彼此靠近)，从而使心电图背景不正确.
All the inner grey lines should be lined at precise points to draw perfect squares on the ecg sheet. However, there are some lines which are not spaced evenly (they are closer to each other), making the ecg graph background incorrect.
这是我的代码的作用:
标记: 我编写了一个在x和y轴上生成标记的函数.标记是图形上的深粉红色线条.这些标记将在4条灰线(由较大的深粉红色方框内的较小的灰色方块组成)之后在x和y轴上生成.这些似乎正确绘制.
MARKINGS : I have written a function to generate markings on x and y axis. Markings are the dark pink lines on the graph. These markings will be generated on x and y axis after 4 grey lines (which make up the smaller grey squares inside the bigger dark pink boxes). These seem to be drawn correctly.
提示: 通过编写两个在x和y轴上生成刻度的函数，我已经覆盖了Flot图表本机刻度生成器.在x轴上，每40毫秒代表一个刻度(一条灰色线)，在y轴上，0.1毫伏代表一条灰色线.即使函数生成具有正确刻度值的正确数组，但浮点图上的刻度间距也不均匀.某些刻度线间隔更近，这是不正确的.
TICKS: I have overridden Flot charts native tick generator by writing two functions which generate ticks on x and y axis . On x axis, each 40 ms represents one tick (one grey line) and on y axis 0.1 millivolt represents one grey line. Even though the functions generate correct arrays with correct values for ticks, the tick spacing on flot chart is not even. Some tick lines are more closely spaced which is incorrect.
并非所有的刻度线都绘制不正确，但是，间距不规则的刻度线数量很多，在仔细检查图形时可以看到.首先，图表的第4列和第4行具有不均匀分布的刻度线. (在jsfiddle之外的浏览器上，这将成为第3行和第3列).这些不均匀的滴答声会在整个图中随机重复.
Not all ticks are drawn incorrectly.However, the ones that have irregular spacing are significant in number and are visible on more careful inspection of the graph. For a start, the 4 th column and row of the graph has unevenly spaced tick lines. (On browser outside of jsfiddle, this becomes 3rd row and 3rd column ). These uneven ticks repeat randomly throughout the graph.
我的代码如下所示.它也已上传到 JSFiddle
My code is as shown below. It has also been uploaded at JSFiddle
有人在绘制刻度线时遇到过类似的浮点图问题吗?我是否正确使用刻度线?感谢您的帮助.
Has anyone gone through similar problem with flot charts while drawing tick lines? Am I using ticks incorrectly? Appreciate your help on this.
JavaScript:
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 + " – ");
}
);
推荐答案
很棒的问题.
以下是您的壁虱中的一些:
[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
这是每个刻度之间的区别:
And here's the difference between each of your ticks:
[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必须将其转换为画布坐标.他们在这里:
That looks pretty good, nice and evenly spaced. Internally though flot has to convert these to canvas coordinates. Here they are:
[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
再次看起来不错，但间隔仍然很好.
Again that looks pretty damn good, still nicely spaced.
但是，我们遇到了一个问题，flot无法在479.16处画一条线.它必须在像素位置绘制，并且这些是整数值.那么，弗洛特做什么? Math.floors他们.您的像素位置"变为:
BUT we got a problem, flot can't draw a line at 479.16. It has to draw at pixel positions and those are integer values. So, what does flot do? It Math.floors them. Your "pixel positions" become:
[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
现在我们有一个问题，间距不再均匀.
Now we have a problem, no more even spacing.
所以，我的第一个直觉是说，哇，这是个问题.但是我看不出flot如何更好地进行数学运算(并且仍然获得相同的效率).
So, my first instinct is to say, whoa, this is a bug in flot. But I can't see how flot can do the math any better (and still get the same efficiency).
那么您如何解决呢?
1.)增加画布的尺寸.刻度线之间的间距更大，您将无法在此处或那里看到一个像素.
1.) Increase the size of the canvas. More spacing between the ticks and you won't be able to see a pixel off here or there.
2.)进行后勤工作.从像素位置开始，然后根据它们计算您的轴位置.如果今晚有时间，我会尝试一下.不会很漂亮.
2.) Work backworks. Start with pixel positions and calculate your axis positions from them. If I get some time tonight I'll try out that idea. It won't be pretty.
编辑
这是尝试均匀分布刻度线.它需要两次绘制图，因为我需要初始边界信息来开始间隔(是否有边距，刻度标签等).还需要我手动调整占位符div的高度，以便所有刻度都适合:
Here's an attempt to evenly space ticks. It relies on drawing the plot twice since I need the initial bounds information to start the spacing (is there a margin, tick labels, etc...). It also required me to manually tweak the placeholder div height so all the ticks will fit:
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];
}
},
这是小提琴.我删除了xaxis和标记，以便更好地可视化.
Here's a fiddle. I remove the xaxis and markings to better visualize.
编辑2
因此，结果最重要的部分是绘图高度.使用您的原始代码和510像素的绘图高度，刻度线会自己均匀分布.这是差异:
So, it turns out the most important part here is the plot height. With your original code and a plot height of 510 pixels, the ticks space evenly all by themselves. Here's the diff:
[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
这篇关于浮点图滴答线不均匀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
