Question

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

当用户将鼠标悬停在一个点上时，工具提示显示“6.00 = 168处的高度（cm）”，基本上“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
                    }
            });
        }

Answer 1

尝试：

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

您的刻度线（xLabels）是一个包含2个元素数组的数组。你只需要第二个元素，标签本身。

绘制图表工具提示

1 个答案: