jQuery форматирование ярлыка круговой диаграммы jQuery

Question

Я пытаюсь отформатировать ярлыки круговой диаграммы запроса и легенды.

Это то, что я создал до сих пор:

Это то, что я пытаюсь создать (я сделал это с помощью Photoshop):

As вы можете видеть, что я изо всех сил пытаюсь включить процент и значения в пирог (см., что процент выделен жирным шрифтом, а значение - нет), а вертикальный центр выравнивает легенду.

Вот код:

(function() { 

    var data = [ 
     { label: "Sales & Marketing", data: 9545, color: "#62A83B"}, 
     { label: "Research & Development", data: 16410, color: "#2897CB"}, 
     { label: "General & Administration", data: 4670, color: "#DEAB34"} 
    ]; 

    $(document).ready(function() { 
     $.plot($("#expenses-chart"), data, { 
      series: { 
       pie: { 
        show: true 
       } 
      }, 
      legend: { 
       show: true, 
       labelFormatter: function(label, series) { 
        var percent= Math.round(series.percent); 
        var number= series.data[0][1]; //kinda weird, but this is what it takes 
        return('&nbsp;<b>'+label+'</b>:&nbsp;'+ percent + '%'); 
       } 
      } 
     }); 
    }); 

})(); 

Любые идеи? Благодаря!

Answer 1

Ваш первый вопрос во многом зависит от наценки и CSS. Я бы разместил легенду в своем собственном div и style that to vertically выровнял ее.

<style> 
    #wrapper { 
    display: inline-flex; 
    } 
    #legend { 
    margin: auto 5px; 
    } 
    #expenses-chart{ 
    float: left; 
    width: 300px; 
    height: 300px; 
    } 
    .pieLabel{ 
    color: #fff; 
    } 
</style> 

<div id="wrapper"> 
    <div id="expenses-chart"></div> 
    <div id="legend"></div> 
</div> 

Для наклеек внутри пирога, вы должны указать пользовательский форматировщик для этикеток:

$.plot($("#expenses-chart"), data, { 
    series: { 
    pie: { 
     show: true, 
     radius: 150, 
     label: { 
     show: true, 
     radius: 0.5, // place in middle of pie slice 
     formatter: function(label, series){ 
      var percent = Math.round(series.percent); 
      var number = series.data[0][2]; // this is the y value of the first point 
      return ('&nbsp;<b>' + percent + '%</b><br/>$' + number); // custom format 
     } 
     } 
    } 
    }, 
    legend: { 
    show: true, 
    container: $("#legend") 
    } 
} 

Сведя вместе производит (пример here):