【发布时间】：2026-02-09 00:30:01
【问题描述】：
我正在使用 flot 图表来显示心电图信号。要求是图表背景应该看起来与心电图纸完全一样。
所有内部灰色线应在精确点上排列，以便在心电图表上绘制完美的正方形。但是，有些线的间距不均匀（它们彼此更接近），导致心电图背景不正确。
这是我的代码的作用：
标记： 我编写了一个函数来在 x 和 y 轴上生成标记。标记是图表上的深粉色线条。这些标记将在 4 条灰色线之后在 x 和 y 轴上生成（构成较大的深粉色框内的较小灰色方块）。这些似乎是正确绘制的。
蜱： 我通过编写两个在 x 和 y 轴上生成刻度的函数来覆盖 Flot 图表本地刻度生成器。在 x 轴上，每 40 ms 代表一个刻度（一条灰线），在 y 轴上，0.1 毫伏代表一条灰线。即使函数生成具有正确刻度值的正确数组，flot 图表上的刻度间距也不均匀。一些刻度线间隔更近，这是不正确的。
并非所有刻度都绘制不正确。但是，间距不规则的刻度数量很多，并且在更仔细地检查图表时可见。首先，图表的第 4 列和第 4 行有不均匀间隔的刻度线。 （在 jsfiddle 之外的浏览器上，这变成了第 3 行和第 3 列）。这些不均匀的刻度在整个图表中随机重复。
我的代码如下所示。也已上传至JSFiddle
有没有人在绘制刻度线时遇到过类似的浮动图表问题？我是否错误地使用了刻度？感谢您在这方面的帮助。
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 + " – ");
}
);
【问题讨论】：
标签： flot