Jquery Flot pasta grafikleri, yüzde

Question

yerine veri değerini gösterir Etiketlerde gösterilen verileri "ham veri" yüzdesinden gerçek verilere değiştirmek için flot.pie'yi nasıl elde edeceğimi anlayamıyorum. Örneğimde, okunmuş/okunmamış mesajların sayısına sahip bir pasta grafiği oluşturdum. okuma mesajların

sayısı: okunmamış mesajların 50. sayısı: 150

oluşturulan pasta% 25 mesajları okumak yüzdesini gösterir. Bu noktada gerçek 50 mesajı göstermek istiyorum.

i pasta oluşturmak için kullanılan kod:

var data = [ 
    { label: "Read", data: 50, color: '#614E43' }, 
    { label: "Unread", data: 150, color: '#F5912D' } 
]; 

Ve: Bu mümkün mü

$(function() { 
     $.plot($("#placeholder"), data, 
      { 
      series: { 
       pie: { 
        show: true, 
        radius: 1, 
        label: { 
         show: true, 
         radius: 2/3, 
         formatter: function (label, series) { 
          return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>'; 

         }, 
         threshold: 0.1 
        } 
       } 
      }, 
      legend: { 
       show: false 
      } 
     }); 
    }); 

aşağıdaki resme bakın?

@Ryley cevabı ile kirli bir çözüm geldi. Series.data çıktığında "1,150" ve "1,50" değerleri döndü. Döndürülmüş değerin ilk 2 karakterini çıkarma ve çıkarılan değeri görüntüleme fikrini buldum.

String(str).substring(2, str.lenght) 

Bu

Bu çözüm ile oluşturulan pasta grafik:

Bu en iyi çözüm değildir, ancak benim için çalışıyor. Birisi daha iyi bir çözüm bilirse ...

Answer 1

Sorunun cevabını buldum. Veri nesnesi çok boyutlu bir dizidir.Kod "series.data [0] [1]" verilerin çıkarılması için

$(function() { 
    $.plot($("#placeholder"), data, 
     { 
     series: { 
      pie: { 
       show: true, 
       radius: 1, 
       label: { 
        show: true, 
        radius: 2/3, 
        formatter: function (label, series) { 
         return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + series.data[0][1] + '</div>'; 

        }, 
        threshold: 0.1 
       } 
      } 
     }, 
     legend: { 
      show: false 
     } 
    }); 
}); 

Dikkat: elde etmek için acual veriler aşağıdaki kodu kullanın.

Answer 2

ProtoVis gibi bir şey deneyin. Diğer ücretsiz yararlı veri görselleştirme kitaplıklarına bağlantılar ile SO üzerinde birkaç iyi cevap vardır. Bazı fusion charts varsa da oldukça iyidir.

Answer 3

Bu, "Bu noktada, gerçek 50 iletiyi göstermek istiyorum" ile ne demek istediğinize bağlıdır.
Okuma veya Okunmadı bölümünü farz ettikten sonra bir açılır pencereye sahip olmak istediğinizi varsayalım.

İlk adım pasta grafiğinizi interaktif hale getirmektir. Sen şöyle grid seçeneği eklemek gerekir: bu

$("#placeholder").bind('plothover',function(e,pos,obj){ 

}); 

$("#placeholder").bind('plotclick',function(e,pos,obj){ 
    if (obj.series.label == 'Read'){ 
     //show your read messages 
    } else { 
     //show your unread messages 
    }  
}); 

That:

legend: { 
    show: true; 
}, 
grid: { 
    hoverable: true, 
    clickable: true 
} 

Ardından, Mesajlarınızı almak işlevlere tıklama/vurgulu olayları bağlamak ve bunları görüntülemek zorunda! Ne demek sen pasta her zaman doğrudan tüm iletileri görüntülemek istedikleri basitçe ise

---

Şimdi, sadece iletileri içeren global bir değişkeni başvurmak için biçimlendirici değiştirmeniz gerekir.

Answer 4

Sen kullanabilirsiniz:

formatter: function (label, series) { 
    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+Math.round(series.percent)+"%<br/>" + series.data[0][1] +'</div>'; 
},