2

我正在使用 Flot 交互式图表，显示的数据是从数据表中获取的。

当用户将鼠标悬停在某个点上时，工具提示会显示“Height(cm) on 6.00 = 168”，基本上“168”表示正确的 y 值，因为它与 y 轴标签相对应。然而，“6.00”应该是一个日期，就像图表上沿 x 轴显示的那样，“6.00”是序列号，我需要获取标签.....有什么想法吗？

   //Show ToolTip Part 2
            function showTooltip(x, y, contents)
            {
                $('<div id="tooltip">' + contents + '</div>').css(
                    {
                        position: 'absolute',
                        display: 'none',
                        top: y + 5,
                        left: x + 15,
                        border: '1px solid #333',
                        padding: '4px',
                        color: '#fff',
                        'border-radius': '3px',
                        'background-color': '#333',
                        opacity: 0.7
                    }
                ).appendTo("body").fadeIn(400);
            }

            //Show ToolTip Part 1
            var previousPoint = null;
            $("#VitalsChart").bind("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].toFixed(2),
                            y = item.datapoint[1].toFixed(2);



                        showTooltip(item.pageX, item.pageY, item.series.label + " on " + x + "=" + "<strong>" + y + "</strong>");


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

            //Plot Data
            var plot = $.plot($("#VitalsChart"), [{ data: weight, label: "Weight (kg)" },
                                                  { data: height, label: "Height (cm)" }],
            {
                series:
                    {
                        lines:
                            {
                                show: true,
                                lineWidth: 2,
                                fill: false,
                                fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.1 }] }
                            },

                        points: { show: true },

                        shadowSize: 7
                    },

                grid:
                    {
                        hoverable: true,
                        clickable: false,
                        tickColor: "#ddd",
                        borderWidth: 1,
                        minBorderMargin: 10
                    },

                colors: ["red", "blue"],

                xaxis:
                    {
                        ticks: xLabels,
                        tickDecimals: 0
                    },

                yaxis:
                    {
                        ticks: 11,
                        tickDecimals: 0
                    }
            });
        }
4

1 回答 1

2

尝试：

var x = xLabels[item.datapoint[0] - 1][1];

您的刻度 ( xLabels) 是一个由 2 个元素数组组成的数组。您只需要第二个元素，即标签本身。

于 2013-06-07T13:59:09.793 回答