Javascript 如何在flot图表中分隔刻度?
我下面有一个flot图。您将看到标签已压缩。我想使刻度之间的宽度确保显示所有标签。标记如下:Javascript 如何在flot图表中分隔刻度?,javascript,jquery,flot,Javascript,Jquery,Flot,我下面有一个flot图。您将看到标签已压缩。我想使刻度之间的宽度确保显示所有标签。标记如下: <!-- Graph HTML --> <div id="graph-wrapper"> <div class="graph-info"> <a href="#" id="bars"><span></span></a><a href="#" id="lines" class="active">&l
<!-- Graph HTML -->
<div id="graph-wrapper">
<div class="graph-info">
<a href="#" id="bars"><span></span></a><a href="#" id="lines" class="active"><span></span>
</a>
</div>
<div class="graph-container">
<div id="graph-lines" style="width: 95%; height: 80%;">
</div>
<div id="graph-bars" style="width: 95%; height: 80%;">
</div>
</div>
<div id="series-check" class="graph-info bottom">
</div>
</div>
<!-- end Graph HTML -->
JS:
var ticks = [];
for (var i = 0; i < graphData[0].data.length; i++) {
ticks.push(graphData[0].data[i][0]);
}
$.plot($('#graph-lines'), graphData, {
series: {
points: {
show: true,
radius: 5
},
lines: {
show: true
},
shadowSize: 0
},
grid: {
color: '#646464',
borderColor: '#fff',
borderWidth: 20,
hoverable: true
},
xaxis: {
//tickColor: 'transparent',
//tickDecimals: 2,
mode: "time",
ticks: ticks,
timeformat: options["timformat"], // "%h:%M
min: new Date(options["GraphMinXValue"]), // min milliseconds from data
max: new Date(options["GraphMaxXValue"]) //max milliseconds from data
},
yaxis: {
min: 0,
show: true
},
pan: {
interactive: true
},
zoom: {
interactive: false
}
});
var ticks=[];
对于(var i=0;i
我真的需要图形上的百分比来允许图形随着窗口大小调整而重新调整大小,但我想要的是刻度的间距来自动将图形推大。我有溢出:隐藏在包含的div上,并使用pan来允许用户看到隐藏的溢出。有没有办法解决此问题?我建议选择minTickSize使问题得以解决。但如果必须使用特定的刻度大小,即每小时一个刻度,则两种可能的解决方案是交错/倾斜刻度,或增加画布大小 默认情况下,Flot不支持交错/倾斜刻度,尽管有一些插件可能会有所帮助,比如Mark Cote的插件。但该插件还不能与Flot 0.8-final一起使用
至于增加绘图大小,Flot无法根据刻度数自动增加其占位符;您必须自己增加占位符。如果您使用溢出:隐藏div来平移绘图,那么听起来您可能真正应该使用的是。我最近使用的一种解决方法每隔一个tic设置一次k标记为“”(一个空格)。图表似乎承认这不是一个实际值,并将勾号与实际值很好地隔开。当网页在较小的屏幕上时,我个人这样做是为了调整大小
谢谢。我目前正在使用navigate插件,但是为了实现这一点,我需要在容器上应用一个百分比。我仍然需要图形不要压缩这些数据,所以我可能需要应用一些令人讨厌的逻辑,将这个div的百分比宽度增加到300%,这将隐藏溢出,但是在t之间添加更多的空间他在排队。