jQueryflot-适合可变范围图表的时间轴刻度标签,没有文本溢出
jQuery flot - fit time-axis tick labels without text overflowing for variable range chart
我有一个简单的浮动折线图,包含每日数据样本。但范围是用户可选择的(从2天到几年的数据)。
var chartConfig = {
xaxis: {
mode: "time",
timeformat: "%Y/%m/%d"
}
};
$.plot($("#chart"), readings, chartConfig);
我希望x轴刻度显示日期(例如2013/07/15),但只显示适当数量的刻度,均匀分布在整个范围内,这样标签文本就不会溢出(例如10个刻度)。
我已经查看了tickSize和minTickSize但这些只是"指导原则"-超过4个刻度,它们在本用例中没有影响。
最后,我自己写了一些东西来显示固定数量的刻度,而不考虑数据范围。
它计算要显示刻度的样本的间隔,然后使用模运算符来测试是否显示样本刻度。
var ticks = [];
var tick_count = 7; //number of ticks to show
var sample_count = readings[0].data.length;
var display_interval = Math.round((sample_count/tick_count));
for (var i = 0; i < sample_count; i++) {
if((i % display_interval) == 0) {
ticks.push(readings[0].data[i][0]);
}
}
chartConfig.xaxis.ticks = ticks;
$.plot($("#chart"), readings, chartConfig);
这假设所有样本的持续时间相同。
相关文章:
- 在<页眉>标签
- 如何检测是否有溢出
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- iframe正在添加标签,需要删除它们
- 如何通过溢出来判断元素被切断了多少像素:隐藏在父级上
- 如何自动调整标签的高度以适应内容
- Jquery标签插件粘贴问题
- Twitter引导程序Typeahead-Id&标签
- Highcharts-如何在自定义格式化程序中获得默认的y轴标签格式化程序
- Morris.js折线图x轴标签在调整大小后消失
- JavaScript goto 标签如何使用内部循环
- 显示某个用户ID的某个标签的30张Instagram图片
- 标签客户端的设置值
- 谷歌图表显示所有标签
- 高图表不会在溢出时隐藏类别标签
- 如何添加类似于堆栈溢出系统的标签文本输入系统
- 溢出隐藏添加在删除滚动条的正文标签中
- jQueryflot-适合可变范围图表的时间轴刻度标签,没有文本溢出
- Highcharts:为什么列栏内的数据标签文本不合理,并且溢出
- jQuery superfish在使用box-sizing属性时添加了隐藏在ul标签上的溢出