我想制作一个带有可点击线的谷歌折线图,但我似乎只能使数据点可点击 . 是否有可能使数据点之间的线可点击?
使用配置选项 focusTarget: 'category'
focusTarget: 'category'
单击该行时,将选择最近的点 .
虽然,在我目前的浏览器中,我必须 grab 鼠标的重点,在它之前~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>
EDIT
如果 focusTarget: 'category' 无效,另一种选择是使用 'click' event
'click'
虽然没有任何重点,也没有显示工具提示,但该线仍然是可点击的 .但是点击的位置需要相当精确 .你可以使用 targetID 来确定点击了什么/哪一行...
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>
1 回答
使用配置选项
focusTarget: 'category'
单击该行时,将选择最近的点 .
虽然,在我目前的浏览器中,我必须 grab 鼠标的重点,
在它之前~2px会让我点击 .
但它确实起作用
focusTarget: 'datum'
,只允许点击该点
看下面的工作片段......
EDIT
如果
focusTarget: 'category'
无效,另一种选择是使用
'click'
event虽然没有任何重点,也没有显示工具提示,但该线仍然是可点击的 .
但是点击的位置需要相当精确 .
你可以使用
targetID
来确定点击了什么/哪一行...请参阅以下片段...