我有一个简单的浮动折线图,包含每日数据样本。但范围是用户可选择的(从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);
这假设所有样本的持续时间相同。