浮动图表工具提示答案

【问题标题】：Flot chart tooltip浮动图表工具提示
【发布时间】：2013-06-07 09:28:47
【问题描述】：

我使用的是 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
                    }
            });
        }

【问题讨论】：

你如何定义xLabels？您可能可以索引到：var x = xLabels[item.datapoint[0]]
不错的一个马特，看起来好多了，添加了以下 var x = xLabels[item.datapoint[0] - 1]，它打印了正确的日期，但也打印了它前面的序列号....
xlabel 定义..在 js 文件中 var xAxisData = data.xLabels.map(function (obj) { return [parseInt(obj.sequence, 10), obj.date]; });跨度>
在控制器中... var xAxisResult = (from a in model select new { sequence = ++i, date = a.RecordedDate.ToString("dd/MM/yy") }) .ToList();返回 Json(new { xLabels = xAxisResult,

标签： javascript jquery flot

【解决方案1】：

试试：

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

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

【讨论】：

类似的解决方案，对我有用：item.series.data[item.dataIndex][0] 我不得不说我确实使用了“类别”插件，不知道这是否使它的行为有所不同。