任何Flot與一些信息框的例子？

Question

我有jQuery Flot餅圖，當點擊圖表元素時，我需要在信息框/工具提示中顯示一些鏈接。有一些已經發明的東西嗎？

Answer 1

餅圖的example page的最後一點應該讓你開始。下圖是用初始化：

$.plot('#placeholder', data, { 
    series: { 
     pie: { 
      show: true 
     } 
    }, 
    grid: { 
     hoverable: true, 
     clickable: true 
    } 
}); 

比你可以（從示例頁面再次）結合處理的plotclick事件：

placeholder.bind("plotclick", function(event, pos, obj) { 
    if (!obj) { 
     return; 
    } 

    percent = parseFloat(obj.series.percent).toFixed(2); 
    alert("" + obj.series.label + ": " + percent + "%"); 
}); 

這個例子會彈出一個警告框，它不應該是很難改變你想要的東西。 plothover和plotclick事件在文檔的Customizing the grid部分進行了說明。

Answer 2

您必須先將您的情節設置爲可移動和可點擊。

$.plot('#placeholder', data, { 
    series: { 
     pie: { 
      show: true 
     } 
    }, 
    grid: { 
     hoverable: true, 
     clickable: true 
    } 
}); 

在此之後，你可能想嘗試這樣的事情。創建一個全局變量，命名爲

previousPoint = null. 

此函數創建一個附加到html正文的div。不管你喜歡，你都可以調整樣式。

function showToolTip(x, y, contents) { 
    $('<div id="tooltip">' + contents + '</div>').css({ 
     position: 'absolute', 
     display: 'none', 
     top: y - 25, 
     left: x + 5, 
     padding: '2px',  
     size: '10', 
     'border-radius': '6px 6px 6px 6px', 
     'background-color': '#F8E397', 
     opacity: 0.80 
    }).appendTo("body").fadeIn(200); 
} 

$.fn.useToolTip = function(){ 
    $(this).bind("plotclick", function (event, pos, item){       
     if (item) 
     { 
      if (previousPoint != item.dataIndex) 
      { 
       previousPoint = item.dataIndex; 
       $("#tooltip").remove(); 
       var x = item.datapoint[0].toFixed(2); //I believe x and y will still 
                 //work on a pie chart because 
                 //they do not refer to 
                 //coordinates, but rather, they 
                 //refer to the position of the 
                 //graph your mouse is hovering. 
       var y = item.datapoint[1].toFixed(2);  
       showToolTip(item.pageX, item.pageY, "whatever text you would like to display"); 
       } 
      } 
      else 
      { 
       $("#tooltip").remove(); 
       previousPoint = null; 
      } 
    }); 
}; 

你調用函數你繪製你的數據後，這樣的：

$("#placeholder").useToolTip();