浮点图中堆叠线图的工具提示问题

Question

我正在使用堆叠折线图，但我遇到了悬停工具提示的问题。有些值为 0。我只想忽略 0 值点上的工具提示，因为它们会覆盖大于 0 值的点。

我曾尝试从数据数组中消除 0 个值点，但这样做无法正确呈现图形。

请看这个：

Answer 1

当使用 flot.tooltip 插件时，您可以将 content 属性设置为一个函数，其中 returns 工具提示字符串或 false不想显示工具提示（参见 documentation），像这样：

tooltipOpts: {
    content: function (label, x, y, datapoint) {
        if (y == 0) {
            return false;
        }
        else {
            // change this to get your desired format
            return (new Date(x)).toString() + label + x;
        }
    },

使用 plothover 事件手动生成工具提示时，在显示工具提示之前检查值，如下所示：

    $("#placeholder").bind("plothover", function (event, pos, item) {
        // check if value is zero
        if (item && item.datapoint[1] != 0) {
            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2);

            // change this to get your desired format
            $("#tooltip").html(x + item.series.label + y)
                .css({top: item.pageY + 5, left: item.pageX + 5}).fadeIn(200);
        } else {
            $("#tooltip").hide();
        }
    });

Answer 2

我已经分析了代码库，这里是我打算进行的更改。 https://github.com/flot/flot/pull/1447/files

@@ -607,7 +607,8 @@ Licensed under the MIT license.
                 clickable: false,
                 hoverable: false,
                 autoHighlight: true, // highlight in case mouse is near
-                    mouseActiveRadius: 10 // how far the mouse can be away to activate an item
+                    mouseActiveRadius: 10, // how far the mouse can be away to activate an item
+                    ignoreZeroValuePoints: false
                 },
                 interaction: {
                     redrawOverlayInterval: 1000/60 // time between updates, -1 means in same flow
 @@ -2873,8 +2874,11 @@ Licensed under the MIT license.
                         // use <= to ensure last point takes precedence
                         // (last generally means on top of)
                         if (dist < smallestDistance) {
-                            smallestDistance = dist;
-                            item = [i, j / ps];
+                            jps = j / ps;
+                            if(!options.grid.ignoreZeroValuePoints || series[i].data[series[i].datapoints.points.slice(jps * series[i].datapoints.pointsize, (jps + 1) * series[i].datapoints.pointsize)[0]][1] != 0){
+                              smallestDistance = dist;
+                              item = [i, jps];
+                            }
                         }
                     }
                 }

浮点图中堆叠线图的工具提示问题

Tooltip issue on stacked line graph in flot graphs

javascript

jquery

flot