Javascript 如何在Flot js上修复xaxis标签
我正在使用“类别”模式显示标签。它适用于图形上的少量数据,但当我有超过100个数据时,就无法看到标签。flot js有什么解决方案吗 包含更多数据的图表如下所示: 下面是我用来显示图表的选项:Javascript 如何在Flot js上修复xaxis标签,javascript,jquery,html,canvas,flot,Javascript,Jquery,Html,Canvas,Flot,我正在使用“类别”模式显示标签。它适用于图形上的少量数据,但当我有超过100个数据时,就无法看到标签。flot js有什么解决方案吗 包含更多数据的图表如下所示: 下面是我用来显示图表的选项: var stackOptionSeries = { stack: true, bars: { show: true, barWidth: 0.4, align: 'center',lineWidth: 1.5, fillColor: { colors: [ { opacity: 0.9 }, {
var stackOptionSeries = { stack: true, bars: { show: true, barWidth: 0.4, align: 'center',lineWidth: 1.5, fillColor: { colors: [ { opacity: 0.9 }, { opacity: 0.8 } ] } } };
var options = {
grid:{ hoverable: true,
clickable: true,
autoHighlight:true,
backgroundColor: 'white',
borderWidth:1,
borderColor:"rgba(0,0,0,0.1)",
tickColor:'#FAFAFA'},
series: stackOptionSeries,
legend: {
show: true,
position: "ne",
noColumns: 1
},
xaxis: {
mode: "categories",
tickLength: 0,
panRange: [-0.2, maxXaxisRange+0.2]
},
yaxes: [{ min: 0,ticks:7, panRange: [0,null], zoomRange: false }, {
position: "right",
autoscaleMargin: 1,
ticks:4,
min: 0,
max: 100,
panRange: [0,null],
zoomRange: false
}],
pan: {
interactive: true,
frameRate: 80
},
tooltip: true,
tooltipOpts: {
content: "%y %s, %x", // show percentages, rounding to 2 decimal places
shifts: {
x: 10,
y: 10
},
defaultTheme: false
}
};
嗨
使用有角度的标签怎么样?然后,标签不应该显示在彼此的顶部
xaxis: {
labelAngle: 45}
希望对您有所帮助类别模式的唯一用途是允许使用文本标签。如果您不打算显示标签,那么为什么要使用它?在您的例子中,x轴值似乎与日期对应,为什么不使用时间模式轴呢?