Question

我有jQuery Flot Pie图表，我需要在点击图表元素时在info-box / tool-tip中显示一些链接。是否有一些已经发明的东西？

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();

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

2 个答案: