флот круговая диаграмма с длинными метками рендеринга проблема

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

Диаграмма

Кто-нибудь знает какого-либо решения в этой

Answer 1

Вы можете поместить легенду в другой контейнер и поместить его туда, где хотите, используя CSS.

legend: { 
    container: '#graphLegend'  
} 

Из документации API:

Если вы хотите легенда появляться где-то в DOM, вы можете указать «контейнер» в качестве объекта JQuery/выражения поставить стол легенда в. Опция «позиция» и «маржа» и т. Д. Тогда будет игнорируется. Обратите внимание, что Flot перезапишет содержимое контейнера.

Я обновил Mark's fiddle, чтобы продемонстрировать эту альтернативу.

Answer 2

Вы можете сделать это с помощью комбинации из легенды position и margin свойства:

Например, это нажмет на 400 пикселей справа от угла northwest.

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

См. Скрипку here.