有没有办法防止xaxis标签在flot.js条形图中重叠？ [英] Is there a way to prevent xaxis labels from overlapping in a flot.js bar graph?

问题描述

我在设计中为图表分配的空间相当小，如果图表中有超过5个类别，则标签会相互重叠。有办法防止这种情况吗？以下是我遇到的一个例子： http://jsfiddle.net/bCYET/1/

The space that I have allotted for the graph in my design is fairly small and if there are more than 5 categories in the graph the labels overlap each other. Is there a way to prevent this? Here is an example of what I'm running into: http://jsfiddle.net/bCYET/1/

var data = [
    ["Engineering",14],
    ["Communications",11],
    ["Business",9],
    ["Biology",5],
    ["Natural Sciences",2],
    ["Studio Art",2]
];

var options = {
    series: {
        bars: { 
            show: true,
            barWidth: .6,
            align: "center"
        }    
    },
       xaxis: {
           mode: "categories",
           tickLength: 0
       }
}

$.plot('#barchart', [data], options);

更新：我发现我可以将图例放在图表外的容器中为了我。示例： http://jsfiddle.net/bCYET/2/

UPDATE: I figured out that I can put the legend in a container outside of the graph which will work for me. Example here: http://jsfiddle.net/bCYET/2/

推荐答案

这是一个 flot.js的问题。在该页面上的解决方案中， flot-tickrotor 可能是最容易使用的。

This is currently an open issue with flot.js. Of the solutions on that page, flot-tickrotor is probably the easiest to use.

这篇关于有没有办法防止xaxis标签在flot.js条形图中重叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！