Question

从示例here开始，我知道如何创建一个显示悬停时工具提示的Flot图。但这些示例仅显示如何显示包含x值，y值，标签等的工具提示，我无法弄清楚如何创建更多自定义工具提示。

是否有可以附加自定义数据的地方，我可以在创建工具提示时访问？

例如，为了简化，让我们假设我的代码如下：

var d = [ { label: "Fake!", data: [ [1290802154, 0.3], [1292502155, 0.1] ] } ];
var options = {
    xaxis: { mode: "time" },
    series: {
    lines: { show: true },
        points: { show: true }
    },
    grid: { hoverable: true, clickable: true }
};
$.plot($("#placeholder"), d, options);

现在，当点击第一个数据点时，我希望工具提示显示“Hello”，当点击第二个数据点时，我想显示“Bye”。我该怎么做呢？绑定plothover事件时

$(".placeholder").bind("plothover", function (event, pos, item) { /* etc. */ };

我不确定“item”是指什么，以及如何将数据附加到它。

Answer 1

只需将数据添加到数据数组中即可将数据添加到系列中。

而不是

$.plot(element, [[1, 2], [2, 4]] ...)

你可以

$.plot(element, [[1, 2, "label"], [2, 4, "another label"]] ...)

然后使用该信息显示自定义标签。

查看完整示例的小提琴： http://jsfiddle.net/UtcBK/328/

Answer 2

这是我掀起的粗略JSFiddle example。不确定它是否正常运行，但可能会引发一个想法...

<强> [更新]

你想要绑定到

$("#placeholder").bind("plotclick", function (event, pos, item) {/* code */});

点击活动的活动

[update2] Updated Example

我已经调整了示例以使用您的测试数据，并使用上述内容进行更多操作。至于item对象，它似乎是动态生成的，所以从我所知道的，你不能向它添加额外的数据。但是，您可以创建一个数组，以便在单击时缓存item个对象，并向其添加其他数据并将其用于hover事件。

这个新示例就是这样，它显示了没有点击任何内容时的正常工具提示。但是一旦点击它，它确定点击的点是第一个还是第二个，并向名为item的{{1}}对象添加一个附加属性，并将其存储在名为alternateText的数组中。

现在当一个点悬停在它上面时，它会根据当前itemsClicked对象的相同索引检查数组中是否存在缓存的item对象，该对象是通过{{1 }}。如果缓存数组item中存在匹配的索引，它将从中获取item.dataIndex对象，并使用之前itemsClicked事件期间添加的item属性。 / p>

第一个点的alternateText对象看起来像这样：

click

点击后，它将如下所示并存储在item数组中：

item : {
    dataIndex: 0,
    datapoint: [
        1290802154,
        0.3
    ],
    pageX: 38,
    pageY: 82,
    series: {/* properties of the series that this point is in */},
    seriesIndex: 0
}

请告诉我这些是否有帮助，如果不是，我会闭嘴并停止更新我的答案：P

Answer 3

您也可以尝试以下代码：

HTML正文：

<div id="content">
    <div class="demo-container">
        <div id="placeholder" class="demo-placeholder"></div>
    </div>
</div>

<强>脚本：

<script type="text/javascript">
    function showTooltip(x, y, contents, z) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y - 30,
            left: x - 110,
            'font-weight':'bold',
            border: '1px solid rgb(255, 221, 221)',
            padding: '2px',
            'background-color': z,
            opacity: '0.8'
     }).appendTo("body").show();
     };

    $(document).ready(
                 $(function () {
                     var data = [{
                         "label": "scott",
                         "data": [[1317427200000 - 5000000 * 3, "17017"], [1317513600000 - 5000000 * 5, "77260"]]
                     },
        {
            "label": "martin",
            "data": [[1317427200000 - 5000000 * 2, "96113"], [1317513600000 - 5000000 * 4, "33407"]]
        },
        {
            "label": "solonio",
            "data": [[1317427200000 - 5000000, "13041"], [1317513600000 - 5000000 * 3, "82943"]]
        },
        {
            "label": "swarowsky",
            "data": [[1317427200000, "83479"], [1317513600000 - 5000000 * 2, "96357"], [1317600000000 - 5000000, "55431"]]
        },
        {
            "label": "elvis",
            "data": [[1317427200000 + 5000000, "40114"], [1317513600000 - 5000000 * 1, "47065"]]
        },
        {
            "label": "alan",
            "data": [[1317427200000 + 5000000 * 2, "82504"], [1317513600000, "46577"]]
        },
        {
            "label": "tony",
            "data": [[1317513600000 + 5000000, "88967"]]
        },
        {
            "label": "bill",
            "data": [[1317513600000 + 5000000 * 2, "60187"], [1317600000000, "39090"]]
        },
        {
            "label": "tim",
            "data": [[1317513600000 + 5000000 * 3, "95382"], [1317600000000 + 5000000, "89699"]]
        },
        {
            "label": "britney",
            "data": [[1317513600000 + 5000000 * 4, "76772"]]
        },
        {
            "label": "logan",
            "data": [[1317513600000 + 5000000 * 5, "88674"]]
        }];

                     var options = {
                         series: {
                             bars: {
                                 show: true,
                                 barWidth: 60 * 60 * 1000,
                                 align: 'center'
                             }
                         },
                         points: {
                             show: true
                         },
                         lines: {
                             show: true
                         },
                         grid: { hoverable: true, clickable: true },
                         yaxes: {
                             min: 0
                         },
                         xaxis: {
                             mode: 'time',
                             timeformat: "%b %d",
                             minTickSize: [1, "month"],
                             tickSize: [1, "day"],
                             autoscaleMargin: .10
                         }
                     };

                     $(function () {
                         $.plot($('#placeholder'), data, options);
                     });
                     $(function () {
                         var previousPoint = null;
                         $("#placeholder").bind("plothover", function (event, pos, item) {
                             if (item) {
                                 if (previousPoint != item.datapoint) {
                                     previousPoint = item.datapoint;

                                     $("#tooltip").remove();
                                     var x = item.datapoint[0],
                    y = item.datapoint[1] - item.datapoint[2];
                                     debugger;
                                     showTooltip(item.pageX, item.pageY, y + " " + item.series.label, item.series.color);
                                 }
                             }
                             else {
                                 $("#tooltip").remove();
                                 previousPoint = null;
                             }
                         })
                     });
                 })
                 );
</script>

将鼠标悬停在flot中的某个点上时显示自定义工具提示

3 个答案: