всплывающая подсказка на воображаемой вертикальной линии - PullRequest
Новая
       20

всплывающая подсказка на воображаемой вертикальной линии

2 голосов
/ 28 июня 2011

Как я могу добавить возможность всплывающей подсказки для точки, чтобы показать, когда мышь «зависает» над этой точкой ИЛИ какой-нибудь пиксель на воображаемой вертикальной линии выше / ниже этой точки?

Мой график содержит только 1 строку. я хотел бы, чтобы всплывающая подсказка отображалась для точки данных, когда мышь проходит через «невидимую» вертикальную линию через точку - не принуждая пользователь явно парить над точкой.

Я нашел это решение - но похоже на взлом (и не работает): Алгоритм Floto MouseHover для обнаружения исключительно на основе х местоположения?

Есть ли лучший способ сделать это, если не взломать источник?

Вот пример того, о чем я говорю (его большие диаграммы, но это это функция, которую я хочу). Вы можете навести курсор на линию или навести курсор на любая точка на оси X, чтобы показать точку, которая находится на этой оси X пиксели: http://finance.yahoo.com/echarts?s=^DJI+Interactive#chart1:symbol=^dji;range=1d;indicator=volume;charttype=line; перекрестие = включено; ohlcvalues ​​= 0; logscale = включено; источник = неопределено

1 Ответ

0 голосов
/ 24 августа 2013

Мне удалось сделать что-то похожее на диаграмму Yahoo в этой скрипке .Я просто обновляю положение x, когда мышь зависает: 

$("#placeholder").bind("plothover", function (event, pos, item) {
    latestPosition = pos;
    if (!updateTooltipTimeout) {
        updateTooltipTimeout = setTimeout(update, 30);
    }
});

, затем запускаю метод обновления.Метод обновления (взят из примера flot crosshairs ) интерполирует точку y, ближайшую к x, затем отображает подсказку и указывает на строку: 

function update() {
    updateTooltipTimeout = null;
    var pos = latestPosition;

    var i, j, dataset = plot.getData();
    for (i = 0; i < dataset.length; ++i) {
        var series = dataset[i];

        // Find the nearest points, x-wise
        for (j = 0; j < series.data.length; ++j) {
            if (series.data[j][0] > pos.x) {
                break;
            }
        }

        // Now Interpolate
        var y,
        p1 = series.data[j - 1],
            p2 = series.data[j];

        if (p1 == null) {
            y = p2[1];
        } else if (p2 == null) {
            y = p1[1];
        } else {
            y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
        }

        var o = plot.pointOffset({
            x: pos.x,
            y: y
        });

        updateTooltip(o.left, o.top,
            "x: " + pos.x.toFixed(2) + " y: " + y.toFixed(2));

        plotPoint(o.left, o.top, 5, "rgb(153,180,125)", "circle");
    }
}

Я думаю,Чтобы реально взаимодействовать с точками данных, вам придется изменить источник.

...