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

Question

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

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

有任何想法吗？

Answer 1

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

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

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

注意：您也可以在 Rickshaw GitHub 存储库中查看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);