如何在jqplot餅圖上顯示工具提示

我有一個帶有圖例的jqplot餅圖，我希望在鼠標懸停在餅上時將圖例文本顯示爲工具提示。我不知道該怎麼做。有沒有人有類似的經驗？如何在jqplot餅圖上顯示工具提示

示例代碼：

$(document).ready(function(){ 
    var data = [['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],['Out of home', 16],['Commuting', 7], ['Orientation', 9]]; 
    var plot1 = jQuery.jqplot ('chart1', [data], 
    { 
     seriesDefaults: { 
     renderer: jQuery.jqplot.PieRenderer, 
     rendererOptions: { 
      showDataLabels: true 
     } 
     }, 
     legend: { show:true, location: 'e' } 
    } 
); 
});

來源

2011-11-21 emt14

您需要綁定jqplot數據highligh和unhighligh事件，獲取要顯示的數據並設置包含div title屬性的圖表。

下面的代碼顯示在的格式的標題「X：Y」，其中x是圖例標籤和y是值：

var plot = $.jqplot('plotDivId',...); 

$("#plotDivId").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) { 
      var $this = $(this);     

      $this.attr('title', data[0] + ": " + data[1]);        
     }); 

$("#plotDivId").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) { 
      var $this = $(this);     

      $this.attr('title',""); 
});

這段代碼在我的系統中使用，其工作沒有問題。

來源

2012-05-02 13:58:40

感謝LOT：D – Anant

謝謝Koby。問候，安納什 –

當從一部分的餡餅傳遞到另一部分時，你不工作，當你出門 – coorasse

我不相信有一個內置在此。您需要將處理程序綁定到'jqplotDataHighlight'和'jqplotDataUnhighlight'事件。請參閱page底部的示例。這是用泡泡圖來做的，但它也應該翻譯成餅圖。

來源

2011-11-21 20:11:44 Mark

我使用的是最新版本的jqPlot的，並得到了提示只要使用以下內部「seriesDefaults」部分的工作：

highlighter: { 
    show: true, 
    formatString:'%s', 
    tooltipLocation:'sw', 
    useAxesFormatters:false 
}

的重要組成部分，是「useAxesFormatters：假」，因爲沒有在餅圖中的軸。隨意將「formatString」更改爲你想要的任何內容，但對於我來說，只是「％s」顯示了在傳說中出現的完全相同的字符串。

來源

2012-01-04 21:24:04 Srinidhi

這沒有顯示餅圖的工具提示 –

upvoted your post。你的解決方案可以工作，但它缺少'show parameter'，你可能還需要指出，高亮插件需要加載/包含 – Mayowa

我使用下面的鏈接，熒光筆插件版本：

https://github.com/tryolabs/jqplot-highlighter

我使用的參數：

highlighter: { 
    show:true, 
    tooltipLocation: 'n', 
    tooltipAxes: 'pieref', // exclusive to this version 
    tooltipAxisX: 20, // exclusive to this version 
    tooltipAxisY: 20, // exclusive to this version 
    useAxesFormatters: false, 
    formatString:'%s, %P', 
}

新的參數保證一個固定的位置，其中提示會出現。我寧願將它放在左上角以避免調整容器div的大小。

來源

2012-10-05 14:14:48

因爲我無法讓熒光筆工作 - 它在餅圖上沒有顯示任何東西 - 我最終選擇了基於highligter事件顯示瀏覽器工具提示的解決方案。

var plot1 = jQuery.jqplot ('chart1', [data], { 
seriesDefaults: { 
    renderer: jQuery.jqplot.PieRenderer 
    } 
} 
); 

$('#chart1').bind('jqplotDataHighlight', function (ev, seriesIndex, pointIndex, data) { 
    document.getElementById('chart1').title = data; 
    //alert('series: '+seriesIndex+', point: '+pointIndex+', data: '+data); 
    });

來源

2014-11-07 12:25:50

如何在jqplot餅圖上顯示工具提示

回答

相關問題