Javascript 弗洛特图表工具提示

我使用的是Flot交互式图表，显示的数据来自数据表

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

//显示工具提示第2部分
函数显示工具提示（x、y、内容）
{
$（''+内容+''）.css(
{
位置：'绝对'，
显示：“无”，
顶部：y+5，
左：x+15，
边框：“1px实心#333”，
填充：“4px”，
颜色：“#fff”，
“边界半径”：“3px”，
“背景色”：“333”，
不透明度：0.7
}
).appendTo（“body”）.fadeIn（400）；
}
//显示工具提示第1部分
var-previousPoint=null；
$（“#生命图表”）.bind（“plothover”，函数（事件、位置、项目）
{
$（“#x”）.text（pos.x.toFixed（2））；
$（“#y”）.text（pos.y.toFixed（2））；
如果（项目）
{
if（上一个点！=item.dataIndex）
{
previousPoint=item.dataIndex；
$（“#工具提示”）.remove（）；
var x=项。数据点[0]。固定（2），
y=item.datapoint[1].toFixed（2）；
显示工具提示（item.pageX、item.pageY、item.series.label+“on”+x+“=“+”“+y+””；
}
}
其他的
{
$（“#工具提示”）.remove（）；
previousPoint=null；
}
});
//绘图数据
变量图=$.plot（$（“#生命图”），[{数据：重量，标签：“重量（kg）”，
{数据：高度，标签：“高度（厘米）”}，
{
系列：
{
线：
{
秀：没错，
线宽：2，
填充：假，
fillColor:{colors:[{opacity:0.5}，{opacity:0.1}]}
},
要点：{show:true}，
阴影大小：7
},
网格：
{
悬停：是的，
可点击：false，
勾选颜色：“ddd”，
边框宽度：1，
利润率：10
},
颜色：[“红色”、“蓝色”]，
xaxis：
{
记号：xLabels，
小数点：0
},
亚克斯：
{
滴答声：11，
小数点：0
}
});
}

试试：

---

您的记号（

xLabels

）是由两个元素数组组成的数组。您只需要第二个元素，即标签本身。

如何定义

xLabels

？您可能可以对其进行索引：

var x=xLabels[item.datapoint[0]]

Nice one Matt，看起来好多了，添加了以下var x=xLabels[item.datapoint[0]-1]，它正在打印正确的日期，但也在打印前面的序列号….xlabel definition..在js文件var xAxisData=data.xLabels.map（函数（obj）{return[parseInt（obj.sequence，10），obj.date]；}）；在控制器中。。。var xAxisResult=（从模型中选择新的{sequence=++i，date=a.RecordedDate.ToString（“dd/MM/yy”））））.ToList（）；返回Json（新的{xLabels=xAxisResult，类似的解决方案，对我有效：

item.series.data[item.dataIndex][0]

我不得不说我确实使用了“categories”插件，不知道这是否会使它的行为有所不同。

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