Is there a way to prevent xaxis labels from overla

问题:

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);

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/

回答1:

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

回答2:

Now this issue has been fixed in v 0.8.3. Use this: http://www.flotcharts.org/blog/