我有一个图形/绘图区域,如下所示:
如您所见,网格线不是等距的。
以下是绘制刻度线和网格线的代码。由于量表是对数的,因此我发现跟随是一种方便的转换方法。
function setUpflot(){
// setup plot
myTestArray = getRandomData();
var options = {
// series : { shadowSize: 0, splines: {show:true,lineWidth:1}},
series : { },
xaxis : { tickLength:0, show: false },
yaxis :{
//position: "left",
ticks: [[55,""],[68.75,""],[82.5,""],[96.25,""],[110,"110"],
[136.25,""],[165,""],[192.5,""],[220,"220"],[275,""],[330,""],
[385,""],[440,"440"],[550,""],[660,""],[770,""],[880,""]],
transform:function(v){return Math.log(v*1.44);},
tickColor:"rgba(148,129,151,0.5)",
min: minGraphY, max:maxGraphY,show: true
},
y2axis :{
//position: "right",
ticks: [[55,""],[68.75,""],[82.5,""],[96.25,""],[110,"A2"],
[136.25,""],[165,""],[192.5,""],[220,"A3"],[275,""],[330,""],
[385,""],[440,"A4"],[550,""],[660,""],[770,""],[880,""]],
alignTicksWithAxis: true,
transform:function(v){return Math.log(v*1.44);},
tickColor:"rgba(148,129,151,0.5)",
min: minGraphY,
max:maxGraphY,
show: true,
tickLength: 0
},
grid : {
borderWidth:0,
backgroundColor:
{
colors: ["#5d0d3f","#5d0d3f","#5d0d3f",
"#6e0326","#724922","#724922",
"#2a5631","#724922","#724922","#6e0326",
"#5d0d3f","#5d0d3f","#5d0d3f"]
}
}
};
我需要网格线等距。我将如何实现?
谢谢
最佳答案
终于实现了。
我有一个对数刻度,所以我遵循以下
步骤1
范围:55-880
初始步骤:55,110,220,440,880
步骤2
计算初始步骤的日志
步骤3
计算日志值之间的差异-例如-value_of_log(110)-value_of_log(55)
步骤4
使用蛮力/击打试验,在“初始步骤”之间插入值,以使日志值之间的差异保持相同。
PS:我已将屏幕快照作为示例附加。
样本表
输出
希望这可以帮助 !
关于flot - 浮点图:对数刻度轴的等距网格线?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17017663/