带有长标签呈现问题的浮点饼图答案

【问题标题】：flot pie chart with long labels rendering issue带有长标签呈现问题的浮点饼图
【发布时间】：2013-08-28 18:31:19
【问题描述】：

我用长标签绘制了一个 flot 饼图聊天，结果很丑，我认为可以在远离饼图或饼图下方的地方显示标签。我使用的 javascript 是

function onSuccess(series) {
            var tickLabels = [];
            var pieData= [];
            for (var i =0;i<series.length;i++){
                tickLabels.push([i,series[i][0]]);
                var obj = {};
                obj['label']=series[i][0];
                obj['data']=series[i][1];
                pieData.push(obj);
                series[i][0] = i;
            }
            var data = [series];
        var pieArea = $("#pieChart");  

        pieArea.css("height", "400px");  
        pieArea.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
        }
        } );

图表

有没有人知道解决办法

【问题讨论】：

标签： javascript jquery charts flot pie-chart

【解决方案1】：

您可以将图例放在不同的容器中，然后使用 CSS 将其放置在您想要的任何位置。

legend: {
    container: '#graphLegend'     
}

来自 API 文档：

如果您希望图例出现在 DOM 中的其他位置，您可以将“容器”指定为 jQuery 对象/表达式以放置图例表入。 “仓位”和“保证金”等选项将是忽略。注意 Flot 会覆盖容器的内容。

我更新了Mark's fiddle 来演示这个替代方案。

【讨论】：

我确实使用了你的代码，谢谢，但是马克先回答了，他的代码也很好。

【解决方案2】：

您可以结合使用图例的 position 和 margin 属性：

例如，这会将其推到 northwest 角的右侧 400 像素。

legend: {
    position: 'nw',
    margin: [400,0]     
}

见小提琴here。

【讨论】：

如何旋转条形图示例中的标签，我尝试了 labelAngle 没有成功