flot餅圖與長標簽呈現問題

Question

我用長標簽繪制了一個flot pie聊天，它顯得丑陋，我認為可以顯示遠離餅圖或餅圖下面的標簽。 我正在使用的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
        }
        } ); 

圖表

有沒有人知道任何解決方案

Answer 1

您可以將圖例放在不同的容器中，並使用CSS將其放在任何位置。

legend: {
    container: '#graphLegend'     
}

從API文檔：

如果希望圖例出現在DOM中的其他位置，則可以將“container”指定為jQuery對象/表達式以將圖例表放入其中。 然后將忽略“位置”和“邊距”等選項。 請注意，Flot將覆蓋容器的內容。

我更新了馬克的小提琴，以展示這種選擇。

Answer 2

您可以結合使用圖例的position和margin屬性來完成此操作：

舉例來說，這將推動它400個像素的右側northwest角落。

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

請看這里的小提琴。