在人力车图形渲染上使用悬停细节显示值

Question

当鼠标移到图表上时，我使用Rickshaw.Graph.HoverDetail 在图表中显示值。

现在，我想显示图表中的初始值 - HoverDetail 样式 - 当它已加载时（在为图表触发 MouseEvent 之前）。

有什么想法吗？

Answer 1

我正在使用引用 here 的悬停子类示例。至少有了这个，我能够通过模拟 svg 元素上的鼠标事件来让我的悬停出现在加载时：

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

这感觉有点 hacky，但似乎可以正常工作（此示例使用 angular，但 rgraph[0].children[0] 将是主要的图形 svg 元素）。这是上面的上下文。

注意：您也可以在Rickshaw GitHub repository中查看examples/hover.js的来源。

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);