Flot:显示最小数量的刻度
Flot: Show a minimum amount of ticks
使用flot图表,我想指定在y轴上显示的最小刻度。在我的情况下,我希望始终显示至少10个刻度(值1-10),但如果我的y轴最大值超过10,那么我希望flot使用其正常刻度算法绘制图表。我目前通过为ticks参数指定一个函数来实现它。
ticks: function(axis){
var ticks = [];
if(axis.max < 10){
ticks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
}
else{
for(var i = 1; i < axis.max; i++){
ticks.push(i);
}
}
return ticks;
},
这样做的问题是,当axis.max
大于10时,我得到的滴答声比我想要的要多得多。有办法避免这种情况吗?
我本来以为我可以返回null,但flot希望返回一个数组。:(
如果您想要刻度生成的默认功能,可以调用轴的tickGenerator
函数。它比使用不维护的代码要干净得多。所以在你的情况下,你可以这样做:
ticks: function(axis){
return axis.max < 10 ? [1,2,3,4,5,6,7,8,9,10] : axis.tickGenerator(axis);
}
默认Flot算法似乎是这样的(参见setupTickGeneration
函数:
noTicks = 0.3 * Math.sqrt(axis.direction == "x" ? canvasWidth : canvasHeight);
所以也许类似的东西在这里会起作用(免责声明-没有真正测试过,不确定你是否在这个范围内拥有所有需要的变量,数学只是勾画出解决方案:
ticks: function(axis){
var ticks = [];
if(axis.max < 10){
ticks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
}
else{
noTicks = 0.3 * Math.sqrt(canvasHeight);
interval = Math.round(axis.max / noTicks);
for(var i = 1; i <= noTicks; i++){
ticks.push(i * interval);
}
}
return ticks;
},
我发现了这个:
ticks: 16
但我还没试过。
相关文章:
- 从桌面读取python文件时高亮显示代码
- 始终至少显示两位小数
- Javascript-格式化数字,始终显示原始的小数位数
- 在数值结果中仅显示两位小数
- 使 NVD3 饼图显示带小数的百分比
- 显示小数两位数,除非是整数
- 发布比显示的更多的小数
- jQuery 以显示 2 位小数
- 日期时间倒计时,删除小数,并在每个类别中保留时间显示时间
- 舍入javascript字符串并显示不带小数的美元格式
- Javascript-以2位小数显示总数
- D3小数位图表显示的小数位数超过了要求
- 让jQuery autoNumeric.js显示模糊时不同的小数位数
- 如何不显示小数
- 如何在Javascript中显示从文本框中添加值的小数?
- 如何在图表API x/y轴标签中仅显示整数(没有小数)
- 显示带有两位小数的Eur结果
- 如何将MDN Decimal舍入示例修改为总是(即使它们都是零)显示小数位数以表示货币
- 如何显示小数
- js设置y轴标签格式以显示两个小数