我希望制作一个谷歌折线图,其中的线条能够被点击,但是我似乎只能让数据点可点击。是否可能也让数据点之间的线条也可点击?
我希望制作一个谷歌折线图,其中的线条能够被点击,但是我似乎只能让数据点可点击。是否可能也让数据点之间的线条也可点击?
使用配置选项focusTarget: 'category'
。
当单击该线时,最接近的点将被选择。
尽管在我的当前浏览器中,我必须将鼠标指针的位置保持在线的上方约2像素处才能让它允许我单击。
但它确实可以与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>
focusTarget: 'category'
时无法避免。请参见 EDIT 以获取另一种选项... - WhiteHat