在flot chart中突出显示行

Question

是否可以用flot突出显示折线图？我只看到数据点的突出显示,而不是点之间的线.

我使用以下示例中的代码.

$("#placeholder").bind("plothover", function (event, pos, item) {
    $("#x").text(pos.x.toFixed(2));
    $("#y").text(pos.y.toFixed(2));

    if ($("#enableTooltip:checked").length > 0) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                showTooltip(item.pageX, item.pageY,
                            item.series.label + " of " + x + " = " + y);
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;            
        }
    }
});

Answer 1

查看 flot 0.7 的源代码，不包含突出显示行的功能。

但是，如果您想扩展 float 来做您想做的事情......

Flot 有一个“覆盖”画布，用于执行突出显示等效果。octx这在源中具有关联的上下文。如果您查看该方法，drawPointHighlight(series, point)您可以看到如何突出显示数据点。您可以为线条编写类似的方法。

该drawOverlay()函数迭代一组可突出显示的对象——您可能还想扩展它来处理“线”对象。

最后，您需要编写一个方法来从可突出显示的对象数组中添加/删除行，类似于现有的highlight()和unhighlight()方法。请注意，这些方法是使用以下行公开的：

plot.highlight = highlight;
plot.unhighlight = unhighlight;