如何將內容添加到Jlot Flot Chart數據數組工具提示

Question

我有一個jQuery Flot折線圖。 我以前沒有使用過JQuery Flot Charts，並且對JQuery Flot Charts經驗很少。 我環顧四周，在其他地方找不到答案。

JQuery Flot折線圖的數據數組如下：

var twitter = [[1, 27], [2, 34], [3, 51]]

當用戶將鼠標懸停在折線圖中的每個數據點上時，將向用戶顯示一個工具提示。 工具提示當前顯示以下內容：

工具提示示例，數據點一> Twitter：| X：1 | Y：27.00

我可以看到，這是在“變量選項”中控制的：

var options = {
                        grid : {
                            hoverable : true
                        },
                        colors : ["#568A89", "#3276B1"],
                        tooltip : true,
                        tooltipOpts : {
                            **//content : "Value <b>$x</b> Value <span>$y</span>",**

現在，我的每個數據數組都顯示不同的數據點。 例如：

數據數組一：顯示用戶個人資料視圖的數量數據數組二：顯示用戶點的數量數據數組三：顯示朋友的數量

現在，當用戶將這些數據點中的每一個懸停時，用戶需要能夠看到每個數據點的相關內容。

例如：

當用戶將鼠標懸停在> Data Array One上時：[1，27]

工具提示需要顯示> 27個配置文件視圖

當用戶將鼠標懸停在>數據數組2上時：[2，34]

工具提示需要顯示> 34個用戶點

如何自定義工具提示顯示的內容？

如何為每個單獨的數據數組提供不同的工具提示內容？

感謝您對這個問題的幫助和支持。

Answer 1

目前尚不清楚如何獲得每個工具提示的顯示，但在此示例中，它是靜態的。 這樣的事情應該起作用。 在這里擺弄- 示例

var tickVals = [[1,"Profile Views"],[2,"User Points"],[3,"Number of Friends"]]

var dataLines = [
{
 label: "Twitter",
 data: [[1, 27], [2, 34], [3, 51]],

}
];



$.plot($("#placeholder"), dataLines, {

grid: {
      hoverable: true,
      mouseActiveRadius: 10

},


lines: {show: true},

points: {

    show: true,
    radius: 4
},

});


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



    var previousPoint = null;
    $("#placeholder").on("plothover", function(event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));
        if (item) {

            if (previousPoint != item.dataIndex) {

                previousPoint = item.dataIndex;

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

                showTooltip(item.pageX, item.pageY,
                                tickVals[x][1] + "- " + y);

            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }

     });