长标签的Flot饼图渲染问题

Question

我画了一个带有长标签的饼图，结果很丑陋，我想知道是否可以将标签显示在饼图的右侧或下方。我使用的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
        }
        } ); 

这张图表

有没有人知道针对这个问题的任何解决方案？

- Smith

Answer 1

您可以使用CSS将图例放在不同的容器中并将其放置在任何位置。

legend: {
    container: '#graphLegend'     
}

来自API文档：

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

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

- Paulo Almeida

---

我实际上使用了你的代码，谢谢，但是马克先回答了，并且他的代码也很好。 - Smith

Answer 2

你可以通过图例的position和margin属性的组合来实现这一点：

例如，这将把它推到northwest角的右侧400像素处。

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

点击 这里 查看代码示例。

- Mark

---

如何在条形图示例中旋转标签？我尝试了labelAngle但没有成功。 - Smith