Question

我正在使用Flot，并希望将文本与每个单独的绘图点相关联，这样当我将鼠标悬停在绘图点上时，将显示相关数据。

我使用了以下示例

http://people.iola.dk/olau/flot/examples/interacting.html

允许我显示工具提示，但我需要将文本与每个绘图点相关联。

Answer 1

我可能太迟回答了这个问题。据我所知，你试图显示一些关于该点的文字，而不仅仅是那个点的x，y坐标。我能够为自己解决这个问题，并在你给出的链接http://people.iola.dk/olau/flot/examples/interacting.html中找到了线索。如果你查看代码，在与plotclick事件绑定的函数中，有这个变量item.dataIndex：

$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");

此变量是图中点的一种id。因此，如果我使用三个参数，x坐标，y坐标和信息创建一个数组，并按以下方式将前两个坐标传递给绘图函数：

var data = [];
for(i=0;i<len;i++)
  data.push([obj[i][1], obj[i][0]]);
//plotting the new array "data"
var plot = $.plot($("#placeholder"), [data], options);

obj数组是：

{{12, 20, "info about point 1"},{26, 30, "info about point 2"}}

然后plothover事件函数中的以下语句将为我们完成工作

showTooltip(item.pageX, item.pageY,obj[item.dataIndex][2]);

这对我有用。希望能帮助到你。：）

注意：

您也可能会发现直接引用文本而不必保留对obj数组的引用很方便：

var myLabel = this.plot.getData()[item.seriesIndex].data[item.dataIndex][2]
showTooltip(item.pageX, item.pageY, myLabel;

Answer 2

这个特殊代码显示了每个点的计数，加上标签，以及x和y值（恰好是年份和工资量，显然会改变为图表显示的任何意义）

        var previousPoint = null;
    jQuery("#placeholder").bind("plotclick", function (event, pos, item) {
            jQuery("#x").text(pos.x.toFixed(0));
                 jQuery("#y").text(pos.y.toFixed(0));

                 if (item) {
                     if (previousPoint != item.datapoint) {
                         previousPoint = item.datapoint;
                                   jQuery("#tooltip").remove();
                                   var x = item.datapoint[0].toFixed(0), y = item.datapoint[1].toFixed(0);
                                   var count = findCount(item.series.label,x);
                                   showTooltip(item.pageX, item.pageY, count + " " + item.series.label + " " + x + " = $" + y);
                          }
                 }
                 else {
                     jQuery("#tooltip").remove();
                     previousPoint = null;
                 }
    });

...它给你点的位置并将它传递给显示工具提示的函数，你可以这样定义：

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

我无法真正告诉你为什么背景颜色必须在引号中，但我可以告诉你它确实如此。显然要更改颜色，填充，淡入淡出值等，以匹配您想要的外观。

Answer 3

function redrawplot() {
   $('.tt1').remove();
   var points = plot.getData();
     var graphx = $('#placeholder').offset().left;
     graphx = graphx + 30; // replace with offset of canvas on graph
     var graphy = $('#placeholder').offset().top;
     graphy = graphy + 10; // how low you want the label to hang underneath the point
     for(var k = 0; k < points.length; k++){
          for(var m = 1; m < points[k].data.length-1; m++){
            if(points[k].data[m][0] != null && points[k].data[m][1] != null){
                  if ((points[k].data[m-1][1] < points[k].data[m][1] && points[k].data[m][1] > points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] < -50 || points[k].data[m][1] - points[k].data[m+1][1] > 50)) {
                                 showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) - 35,points[k].data[m][1], points[k].color);
              }
                              if ((points[k].data[m-1][1] > points[k].data[m][1] && points[k].data[m][1] < points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] > 50 || points[k].data[m][1] - points[k].data[m+1][1] < -50)) {
                                 showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) + 2,points[k].data[m][1], points[k].color);
                              }
                            }
        }
      }

 }

 function showTooltip1(x,y,contents, colour){
      $('<div class=tt1 id="value">' +  contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y,
            left: x,
            'border-style': 'solid',
            'border-width': '2px',
            'border-color': colour,
            'border-radius': '5px',
            'background-color': '#ffffff',
            color: '#262626',
            padding: '0px',
            opacity: '1'
      }).appendTo("body").fadeIn(200);
 }

jQuery flot将文本与绘图点相关联

3 个答案: