2

Flot インタラクティブ チャートを使用しています。表示されるデータはデータ テーブルから取り込まれます。

ユーザーがポイントにカーソルを合わせると、ツールチップに「Height(cm) on 6.00 = 168」と表示されます。基本的に「168」は、y 軸ラベルに対応する正しい y 値を表します。ただし、x 軸に沿ってグラフに表示されるように、「6.00」は日付である必要があります。「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 つの要素配列の配列です。2 番目の要素であるラベル自体が必要です。

于 2013-06-07T13:59:09.793 に答える