Вертикальные линии на hover в google-диаграммах

Question

Я работаю с графическими диаграммами google и директивой angularjs в своем проекте, я ищу, как получить вертикальные линии при наведении, например, Google Trends вместо этого ставит фиксированные линии, но я не могу найти способ сделай это.

Это то, что я хочу пытаюсь сделать:

Я только что получил скрыть вертикальные линии, но не показывать при наведении курсора мыши, это мои варианты директивы углового Google-диаграммы

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 в своем предыдущем ответе, я скорректировал свой код, чтобы использовать его с угловыми-Google-картами в угловом 1.5 компонента, это мой подход:

Радиально-Google-карты имеют некоторые 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> 

Если вы можете видеть, я добавил АРУ на готовых, АРУ на наведении курсора мыши и АРУ-на- это отведения указателя мыши директива позволяет мне присоединить свои собственные функции этих событий.

Использование @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'); 

}; 

Я надеюсь, что вы найдете его полезным и ваши комментарии, чтобы улучшить эту реализацию.