带有长标签呈现问题的浮动条形图

Question

我用长标签绘制了一个浮动条聊天，结果很难看，我看到可以显示旋转 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 中。

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