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但似乎工作正常（这个例子使用angular，但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);

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

1 个答案: