如何在谷歌折線圖上點擊線

Question

我想制作一個帶有可點擊線的谷歌折線圖，但我似乎只能使數據點可點擊。 是否有可能使數據點之間的線可點擊？

Answer 1

使用配置選項focusTarget: 'category'

單擊該行時，將選擇最近的點。

雖然，在我目前的瀏覽器中，我必須抓住鼠標的重點，
在它之前~2px會讓我點擊。

但它與focusTarget: 'datum'相比有效focusTarget: 'datum' ，
只允許點擊該點

看下面的工作片段......

 google.charts.load('current', { callback: function () { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Y'); data.addRows([ [0, 0], [6, 11], [12, 30], [18, 52], [24, 60], [30, 55], [36, 62], [42, 63], [48, 72], [54, 71], [60, 64], [66, 70] ]); // clickable line new google.visualization.LineChart(document.getElementById('chart_div0')).draw(data, { focusTarget: 'category' }); // point only new google.visualization.LineChart(document.getElementById('chart_div1')).draw(data, { focusTarget: 'datum' }); }, packages:['corechart'] }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div>click line</div> <div id="chart_div0"></div> <div>point only</div> <div id="chart_div1"></div> 

編輯

如果focusTarget: 'category'無效，
另一個選擇是使用'click' 事件

雖然沒有任何重點，也沒有顯示工具提示，但該線仍然是可點擊的。
但是點擊的位置需要相當精確。
您可以使用targetID來確定單擊的行/行...

請參閱以下片段...

 google.charts.load('current', { callback: function () { var data = new google.visualization.DataTable(); data.addColumn('number', 'X0'); data.addColumn('number', 'Y0'); data.addColumn('number', 'Y1'); data.addRows([ [0, 0, 0], [6, 11, 7], [12, 30, 13], [18, 52, 19], [24, 60, 25], [30, 55, 31], [36, 62, 37], [42, 63, 43], [48, 72, 49], [54, 71, 55], [60, 64, 61], [66, 70, 67] ]); var chart = new google.visualization.LineChart(document.getElementById('chart_div1')); google.visualization.events.addListener(chart, 'click', function (props) { if (props.targetID.indexOf('line') > -1) { var hAxis = chart.getChartLayoutInterface().getHAxisValue(props.x); var vAxis = chart.getChartLayoutInterface().getVAxisValue(props.y); document.getElementById('chart_div0').innerHTML = props.targetID + ' clicked at [' + hAxis + ', ' + vAxis + ']'; } }); chart.draw(data, { lineSize: 3, pointSize: 5 }); }, packages:['corechart'] }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div0">line click result shown here</div> <div id="chart_div1"></div>