懸停在谷歌圖表上的垂直線條

Question

我正在使用谷歌折線圖和angularjs指令在我的項目中，我正在尋找如何獲得像Google Trends懸停的垂直線，而不是固定線路，但我找不到如何做這個。

這是我想嘗試做：

我剛剛隱藏的垂直線，但沒有顯示在鼠標懸停，這是我的角度，谷歌，圖表指令選項

options: { 
    vAxis: { 
    title: 'My title', 
    gridlines: { 
     count: 10 
    } 
    }, 
    hAxis: { 
    title: 'title hAxis', 
    gridlines: { 
     color: 'transparent' 
    } 
    } 
} 

Answer 1

有沒有標準的配置選項，但你可以添加自己的線上懸停...

看到下面的工作片段f或例如 ...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var dataTable = new google.visualization.DataTable({ 
 
    cols: [ 
 
     {id: 'x', label: 'Date', type: 'date'}, 
 
     {id: 'y', label: 'Fn', type: 'number'} 
 
    ] 
 
    }); 
 

 
    var formatDate = new google.visualization.DateFormat({ 
 
    pattern: 'MMM d, yyyy' 
 
    }); 
 

 
    var oneDay = (1000 * 60 * 60 * 24); 
 
    var startDate = new Date(2016, 1, 21); 
 
    var endDate = new Date(); 
 
    var ticksAxisH = []; 
 
    for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) { 
 
    // x = date 
 
    var rowDate = new Date(i); 
 
    var xValue = { 
 
     v: rowDate, 
 
     f: formatDate.formatValue(rowDate) 
 
    }; 
 

 
    // y = 2x + 8 
 
    var yValue = (2 * ((i - startDate.getTime())/oneDay) + 8); 
 

 
    // add data row 
 
    dataTable.addRow([ 
 
     xValue, 
 
     yValue 
 
    ]); 
 

 
    // add tick every 90 days 
 
    if ((((i - startDate.getTime())/oneDay) % 90) === 0) { 
 
     ticksAxisH.push(xValue); 
 
    } 
 
    } 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.ChartWrapper({ 
 
    chartType: 'LineChart', 
 
    dataTable: dataTable, 
 
    options: { 
 
     hAxis: { 
 
     gridlines: { 
 
      color: 'transparent' 
 
     }, 
 
     ticks: ticksAxisH, 
 
     title: 'title hAxis' 
 
     }, 
 
     tooltip: { 
 
     isHtml: true 
 
     }, 
 
     vAxis: { 
 
     gridlines: { 
 
      count: 10 
 
     }, 
 
     title: 'My title' 
 
     } 
 
    } 
 
    }); 
 

 
    // add hover line 
 
    google.visualization.events.addOneTimeListener(chart, 'ready', function() { 
 
    var svgParent = container.getElementsByTagName('svg')[0]; 
 
    var layout = chart.getChart().getChartLayoutInterface(); 
 
    var lineHeight = layout.getBoundingBox('chartarea').height - 18; 
 
    var lineTop = layout.getBoundingBox('chartarea').top; 
 

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

 
    google.visualization.events.addListener(chart.getChart(), 'onmouseover', function (p) { 
 
     if (p.row !== null) { 
 
     var xPos = layout.getXLocation(dataTable.getValue(p.row, 0)); 
 
     svgParent.appendChild(hoverLine); 
 
     hoverLine.setAttribute('x', xPos); 
 
     } 
 
    }); 
 

 
    google.visualization.events.addListener(chart.getChart(), 'onmouseout', function (p) { 
 
     if (p.row !== null) { 
 
     svgParent.removeChild(hoverLine); 
 
     } 
 
    }); 
 
    }); 
 

 
    chart.draw(container); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

Answer 2

感謝在他前面的回答@WhiteHat，我已經調整了代碼的角度1.5成分與角谷歌，圖表使用它，這是我的方法：

角谷歌，圖表有一些directives附加定製的事件，如鼠標懸停，鼠標移開，準備等，例如：

<div google-chart agc-on-mouseover="$ctrl.onMouseOver(row, column)" 
     chart="$ctrl.data" agc-on-ready="$ctrl.onReady(chartWrapper)" agc-on-mouseout="$ctrl.onMouseOut(row, column)> 
</div> 

如果你能看到，我已經加入AGC打開準備，AGC打開，鼠標懸停和AGC打開，鼠標移開這個指令允許我附上我的自定義功能，這些事件。

使用@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'); 

}; 

我希望你覺得它有用，您的意見改進此實現。