Показать значение с помощью наведения указателя на рисовом графике рикши

Question

Я использую Rickshaw.Graph.HoverDetail для отображения значений в графике при перемещении мыши по графику.

Теперь я хотел бы показать начальное значение из графика - HoverDetail-style - когда оно было загружено (до того, как MouseEvent будет запущен для графика).

Любые идеи?

Answer 1

Я использую пример подкласса для моего зависания, на который ссылается here. По крайней мере, с этим, я был в состоянии получить мой парения появляться на нагрузке, моделируя событие мыши на SVG элемент:

e = document.createEvent('MouseEvents'); 
e.initEvent('mousemove', true, false); 
rgraph[0].children[0].dispatchEvent(e) 

Это чувствует немного Hacky, но, кажется, работает хорошо (в данном примере используется угловая, но rgraph[0].children[0] будет основным элементом svg графика). Вот вышесказанное в контексте.

Примечание: Вы также можете посмотреть источник examples/hover.js в Rickshaw GitHub repository.

var Hover = Rickshaw.Class.create(Rickshaw.Graph.HoverDetail, { 
    render: function(args: any) { 
     legend.innerHTML = args.formattedXValue; 
     args.detail 
      .sort((a: any, b: any) => { return a.order - b.order }) 
      .forEach(function(d: any) { 
       var line = document.createElement('div'); 
       line.className = 'rline'; 
       var swatch = document.createElement('div'); 
       swatch.className = 'rswatch'; 
       swatch.style.backgroundColor = d.series.color; 
       var label = document.createElement('div'); 
       label.className = 'rlabel'; 
       label.innerHTML = d.name + ": " + d.formattedYValue; 
       line.appendChild(swatch); 
       line.appendChild(label); 
       legend.appendChild(line); 
       var dot = document.createElement('div'); 
       dot.className = 'dot'; 
       dot.style.top = graph.y(d.value.y0 + d.value.y) + 'px'; 
       dot.style.borderColor = d.series.color; 
       this.element.appendChild(dot); 
       dot.className = 'dot active'; 
       this.show(); 
      }, this); 
    } 
}); 

var hover = new Hover({graph: graph}); 
e = document.createEvent('MouseEvents'); 
e.initEvent('mousemove', true, false); 
rgraph[0].children[0].dispatchEvent(e);