Флот-диаграмма - как запустить событие на линии hover

Question

Я написал плагин для графических карт jQuery, который позволяет динамически добавлять точки данных, щелкая по строке диаграммы, удаляя их щелчком правой кнопкой мыши, а также позволяет перетаскивать из этих точек вокруг холста.

Это прекрасно работает, и у меня также есть всплывающая подсказка, отображающая значение Y, когда вы наведите указатель мыши или перетащите точку вокруг.

Что бы я хотел сделать, это отобразить вторую подсказку, когда пользователь наводит курсор на строку, показывающую сообщение «Щелкните левой кнопкой мыши, чтобы добавить точку данных».

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

Кто-нибудь знает, как я могу добиться этого?

спасибо.

EDIT: вот jsFiddle, который включает в себя код создания подсказки, что я использую:

jsFiddle

как вы можете видеть всплывающую подсказку визуализирует при наведении на фактическую точку данных, однако я хотел бы найти способ стрельбы имеет отдельную всплывающую подсказку, отображаемую при наведении курсора на линию между точками данных. ПРИМЕЧАНИЕ. Эта скрипта НЕ включает мой пользовательский код для динамического добавления и перетаскивания динамических данных, поскольку для целей этого вопроса было бы слишком много кода.

Answer 1

Итак, в основном мы хотим условно отобразить всплывающую подсказку, когда позиция курсора соответствует требованию, чтобы он находился над линией на диаграмме. Поскольку строки не являются сущностью, с которой мы можем работать, вам нужно рассчитать линию между ближайшими двумя точками по обе стороны от вашего курсора, а затем посмотреть, находится ли на ней текущее положение. Я упростил ваш пример немного:

Функция для вычисления расстояния между двумя точками:

function lineDistance(p1x, p1y,p2x, p2y) { 
    return Math.sqrt((p2x - p1x)*(p2x - p1x) + (p2y-p1y)*(p2y-p1y)); 
} 

Предполагая, что ваши ближайшие две точки А и В к курсору С, то расстояние должно быть равно ABAC + BC.

Так, чтобы определить, находится ли оно на линии: Math.abs(AB-(AC+BC)) < SomeThreshold. Использование порога по существу рисует окно вокруг строки, в которую может попасть курсор.

Затем расширяя свой код в plothover (jsFiddle)

$(placeholder).bind("plothover", function (event, pos, item) { 
    if (item) { 
     var tipText; 

     if (opts.xaxis.mode === "time" || opts.xaxes[0].mode === "time") { 
      tipText = stringFormat(to.content, item, timestampToDate); 
     } else { 
      tipText = stringFormat(to.content, item); 
     } 

     $tip.html(tipText).css({ 
      left: tipPosition.x + to.shifts.x, 
      top: tipPosition.y + to.shifts.y 
      }).show(); 
    } else { 
     // Extended for line hover 
     var series = plot.getData(); 
     var xBeforeIndex = 0; 
     var xAfterIndex = -1; 
     var Threshold = 0.0000025; 
     var i = 1; 
     while (i <= series[0].data.length && xAfterIndex==-1) { 
      if (xAfterIndex == -1 && pos.x > series[0].data[i][0]) { 
       xBeforeIndex = i; 
      } else if (xAfterIndex == -1) { 
       xAfterIndex = i; 
      } 
      i++; 
     } 

     var onTheLine = 
      lineDistance(
       series[0].data[xBeforeIndex][0]/10000,series[0].data[xBeforeIndex][1], 
       pos.x/10000, pos.y) 
      +lineDistance(pos.x/10000, pos.y, 
       series[0].data[xAfterIndex][0]/10000,series[0].data[xAfterIndex][1]) 
      -lineDistance(
       series[0].data[xBeforeIndex][0]/10000,series[0].data[xBeforeIndex][1], 
       series[0].data[xAfterIndex][0]/10000,series[0].data[xAfterIndex][1]); 

      if (Math.abs(onTheLine) < Threshold) { 
       tipText = "Found Line"; 
       $tip.html(tipText).css({ 
        left: tipPosition.x + to.shifts.x, 
        top: tipPosition.y + to.shifts.y 
        }).show(); 
      } else { 
       $tip.hide().html(''); 
      } 
     } 
    }); 

вещи не сделано здесь:

1. Проверьте случаи пограничными уместнее - выше предполагает, что первая и последняя точки на ребра графа.
2. Добавить на свой второй график
3. Улучшите работу поиска набора данных с помощью подхода, такого как bubblesort, чтобы найти индексы до/после.
4. Обратите внимание, что я уменьшаю ось x на 10000. Числа были слишком большими, а в большом промежутке между двумя первыми разницами в оси Y была незначительная (результат всегда был равен нулю между этими двумя точками).

Примечание. Добавление второго графика потребует от вас поиска ближайших точек для обоих графиков и проверки того, попадает ли оно на одну строку. Если ваши линии близки или пересекаются, вы можете просто сделать одну линию приоритета. Если вы попытаетесь добавить вторую строку назад, я могу помочь позже.