Показывать всплывающую подсказку "По дням" на линейном графике (для максимальной или низкой метрики)

#javascript #angular #svg #graph #tooltip

#javascript #угловой #svg #График #всплывающая подсказка

Вопрос:

Всплывающая подсказка работает нормально, но я хочу показать ее Day Wise не между днями. В настоящее время он свободно перемещается, я просто хочу показать его так же, как и в примере с JS fiddle.

Минимальный пример кода. Код StackBlitz

Я хочу, чтобы моя подсказка отображалась как этот пример (не тот же пользовательский интерфейс, но движущийся опыт): например, Js Fiddle

1. Это потребует некоторого кодирования. Должна быть ссылка на точки данных и событие перемещения мыши. Вам нужно знать, в каком положении находятся ваши точки данных, а затем найти точку, ближайшую к вашему текущему положению мыши, и использовать это местоположение в качестве местоположения вашего ящика, возможно, с определенным смещением. В текущем состоянии для этого потребуется не менее часа или двух работы по кодированию: D так что удачи

Ответ №1:

Вы можете использовать (mouseenter) на выбранной строке Path , чтобы отобразить всплывающую подсказку на этой конкретной строке. Возьмите Bool в поле всплывающей подсказки:

.ts

 showTool: boolean = false; // false by default

.html

 <div id="stats_box" [ngStyle]="{ left: stats_box.x   'px' }" *ngIf="showTool">
  //Your Tooltip Content
</div>

<g class="graph_lines" style="clip-path: url(#grid_space);">
 <path attr.id="path{{ channel.channel_id }}" *ngFor="let line of graph_arr.slice(0, 5); let i = index" (click)="switch_paths(line.id)" class="graph_line active" [attr.d]="line.points" stroke-linejoin="round" [attr.fill]="selected.id == line.id ? border_colors[i]: 'transparent'" [ngStyle]="{ stroke: selected.id == line.id ? 'black' : border_colors[i] }" (mouseenter)="selected.id == line.id ? showTool = true : showTool = false"/>
 <use id="use" attr.xlink:href="#path{{ graph_line_switch }}" height="90%"/>
</g>