googleグラフのホバー上の縦線

Question

私のプロジェクトでは、Googleライングラフとangularjs命令で作業していますが、固定線を置く代わりにホバーの垂直線を取得する方法を探していますこれを行う。

これは私がやろうとしたいということです。

私は縦のラインを隠すではなく、マウスのホバーに表示、これは角度-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のおかげで、私は、角度1.5コンポーネントに角度-グーグル・チャートでそれを使用するために、これを自分のコードを調整しています私のアプローチです：

：

角度-グーグル・チャートは、マウスオーバー、マウスアウト、など準備ができて、例のようなカスタムイベントをアタッチするためにいくつかのdirectivesを持っています

あなたが見ることができる場合は、このディレクティブは私がこれらのイベントに私のカスタム関数を添付することができ、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'); 

}; 

私はあなたがそれが役に立つとコメントこの実装を改善するために見つけることを願っています。