在谷歌图表中悬停的垂直线-Verticallinesonhoveringooglecharts

0  

Thanks to @WhiteHat in his previous answer, I have adjusted his code to use it with angular-google-charts in an angular 1.5 component, this is my approach:

感谢@WhiteHat在他之前的回答中，我调整了他的代码，将它与角-谷歌-海图放在一个角- 1.5组件中，这就是我的方法:

Angular-google-charts have some directives to attach custom events like mouseover, mouseout, ready etc, Example:

Angular-google-charts有一些附加自定义事件的指令，比如mouseover、mouseout、ready等，例如:

 
如果您能看到，我已经添加了agc-on-ready, agc-on-mouseover和agc-on-mouseout这些指令允许我将我的定制函数附加到这些事件上。
 
Using @WhiteHat solutions my functions are here:
 
使用@WhiteHat解决方案，我的功能如下:
 
self.OnMouseOver= function (row, column) {
    if (row !== null) {
        var dataTable=self.chartWrapper.getDataTable();
        var xPos = self.layout.getXLocation(dataTable.getValue(row, 0));
        self.svgParent.appendChild(self.hoverLine);
        self.hoverLine.setAttribute('x', xPos);

        // This line is neccesary to move the line under the tooltip     
        self.svgParent.insertBefore(self.hoverLine, self.svgParent.children[4]);
    }
}

self.OnMouseOut= function (row, column) {
    if (row !== null) {
        self.svgParent.removeChild(self.hoverLine);
    }
}

self.OnReady= function (chartWrapper) {
    // Define vars for draw vertical line on hoverLine  
    self.chartWrapper = chartWrapper;

    // Getting container from chartWrapper.getContainerId()
    var cOntainer= angular.element(chartWrapper.getContainerId());
    self.svgParent = container[0].getElementsByTagName('svg')[0];
    self.layout = chartWrapper.getChart().getChartLayoutInterface();
    self.lineHeight = self.layout.getBoundingBox('chartarea').height - 18;
    self.lineTop = self.layout.getBoundingBox('chartarea').top;

    self.hoverLine = container[0].getElementsByTagName('rect')[0].cloneNode(true);
    self.hoverLine.setAttribute('y', self.lineTop);
    self.hoverLine.setAttribute('z', 100);
    self.hoverLine.setAttribute('height', self.lineHeight);
    self.hoverLine.setAttribute('width', '1');
    self.hoverLine.setAttribute('stroke', 'none');
    self.hoverLine.setAttribute('stroke-width', '0');
    self.hoverLine.setAttribute('fill', '#cccccc');

};
 
I hope you find it useful and your comments to improve this implementation.
 
我希望您能发现它的有用性和您的评论来改进这个实现。