flot条形图与长标签渲染问题

Question

我用长标签绘制了一个flot bar聊天，它显得丑陋，我看到可以显示旋转90度的标签，但我尝试使用以下代码但没有成功。正在使用的javascript是

function onSuccess(series) {
            var tickLabels = [];
            var pieData= [];
            for (var i =0;i<series.length;i++){
                tickLabels.push([i,series[i][0]]);
            }
            var data = [series];
        var barArea = $("#barChart");  

        barArea.css("height", "400px");  
        barArea.css("width", "600px"); 


            $.plot( $("#barChart"), data, {
        series: {
         bars: {
            show:true,
            barWidth: 0.5,
            align: "center"
         },
            points: {
                show: true
            }
        },
        grid: {
            hoverable: true,
            clickable: true
        },
        xaxis: {
            labelWidth:12,
            labelAngle: 45,
            ticks: tickLabels
        }
        } );

图表

有没有人知道任何解决方案。

修改

是否可以在条形图中使用图例，然后将图例放在条形码下面，如this或this？

Answer 1

Flot 不支持 labelAngle 选项。 Flot issue tracker有几个提案，但尚未接受。

  

我看到可以显示旋转的标签，如90   度

你看到了什么（请链接？）似乎是Flot的分叉版本，如this一个，它支持 labelAngle 选项。

Answer 2

您可以使用Flot Tickrotor插件。不过，我不确定它是否仍适用于0.7;它最近更新为使用0.8，这可能会破坏向后兼容性。

我们现在正在努力将插件的功能集成到0.9中。

我应该指出，简单地旋转文字看起来仍然很奇怪;如果不缩短标签就无法避免。