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

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

图表

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

编辑

是否可以在条形图中使用图例，然后像这样或这样将图例放在条形字符下方？

Answer 1

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

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

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

Answer 2

Flot还不支持lab​​elAngle选项。Flot 问题跟踪器上有几个提案，但没有一个被接受。

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

您所看到的（请提供链接？）似乎是 Flot 的一个分叉版本，就像这个，它支持lab​​elAngle选项。