jQuery Flot餅圖 - 標籤的標註？

我一直在使用flot來滿足我的jquery製圖需求。現在，我需要添加一個餅圖（我知道flot很好）。對於餅圖，我們需要的一件事情是，我沒有看到flot的標註是標註每個餅圖塊上的值（標註是帶有將標籤連接到餅圖塊的線的標籤）。有誰知道如何讓標註在flot中的餅片上工作？jQuery Flot餅圖 - 標籤的標註？

我們需要標註的主要原因是因爲我們需要爲每個餅塊標註不論其大小。標註可讓我們製作更小的餡餅片，並減少文字與標籤重疊的可能性。

我建議使用圖例，但這是業務所不能接受的。我知道其他製圖解決方案允許標註標註，但是如果可能的話，我想繼續使用flot。

在此先感謝。

來源

2011-07-15 Ed Sinek

我添加了一個類似測試plothover。您需要根據您的具體情況調整解決方案，但這應該是一個很大的幫助。

function showTooltip(x, y, contents) { 
    $('<div id="tooltip">' + contents + '</div>').css({ 
     position: 'absolute', 
     top: y + 5, 
     left: x + 5, 
     border: '1px solid #fdd', 
     padding: '2px', 
     'background-color': '#fee', 
     opacity: 0.80 
    }).appendTo("body");//.fadeIn(200); 
} 

var previousPoint = null; 

$('#placeholder').bind('mouseout', function() { 
    plot.unhighlight(); 
    $("#tooltip").remove(); 
    $(this).data('previous-post', -1); 
}); 

$('#placeholder').bind('plothover', function(event, pos, item) { 
    if (item) { 
     if ($(this).data('previous-post') != item.seriesIndex) { 
      plot.unhighlight(); 
      plot.highlight(item.series, item.datapoint); 
      $(this).data('previous-post', item.seriesIndex); 
     } 
     $("#tooltip").remove(); 
     y = 'on ' + (new Date(item.datapoint[0])).toDateString() + ': ' + item.datapoint[1]; 
     showTooltip(pos.pageX, pos.pageY, item.series.label + " " + y); 
    } else { 
     plot.unhighlight(); 
     $("#tooltip").remove(); 
     previousPost = $(this).data('previous-post', -1); 
    } 
});

讓我知道這是否有幫助！

來源

2011-07-21 05:26:40 ghayes

不完全是我想到的，但它比我想出的其他替代品好很多。謝謝。 –

是的，這肯定有幫助。我們將看看這些能力說的是什麼，但我認爲這是迄今爲止我所見過的最好的解決方案。花了我一分鐘才知道「plot」變量是$ .plot（...）的返回值。一旦我得到了，剩下的就是一塊蛋糕。 –

您可以使用plothover事件來顯示標註。標註的標籤可以在任何你喜歡的地方。這在Flot Page的最後一個例子中顯示。 Google Spreadsheets使用與鏈接相似的解決方案，效果非常好。

來源

2011-07-21 04:29:13

謝謝 - 這就是我目前正在做的，不幸的是它不足 –

jQuery Flot餅圖 - 標籤的標註？

回答

相關問題