用户单击Google图表上的x轴时捕获事件

Question

我正在使用Angular Google Charts 。 我正在处理一个要求，当用户单击它们时，我需要更改x轴值的格式。 像绝对值<=>百分比值。 当用户单击x轴上的任意位置而不是图表的其他部分时，有什么方法可以捕获事件？

我尝试了angular的（单击）事件，但是单击图表的哪个部分并没有给我任何信息。

Answer 1

取决于所使用的图表，
'corechart'图表'corechart'包中的大多数图表都有一个'click'事件。
查看文档中的事件部分以获取特定图表。

'click'事件将收到一个参数，该参数的targetID为所单击的图表元素。
单击x轴标签时， targetID将具有以下形式。

hAxis#0#label#0

其中第一个0是轴的索引（如果只有一个x轴，则始终为零）
第二个0是所点击标签的索引。

因此，以下内容表示单击了第一个x轴上的第二个x轴标签。

hAxis#0#label#1

这样，我们可以使用正则表达式来确定是否单击了任何x轴标签。

/hAxis#(\d+)#label#(\d+)/

请参阅以下工作片段，
单击图表以查看结果。

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = new google.visualization.DataTable(); data.addColumn('number', 'x'); data.addColumn('number', 'y0'); for (var i = 0; i <= 100; i++) { var direction = (i % 2 === 0) ? 1 : -1; data.addRow([i, (2 * i * direction)]); } var options = { curveType: 'function' }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); google.visualization.events.addListener(chart, 'click', function(e) { var match = e.targetID.match(/hAxis#(\\d+)#label#(\\d+)/); if ((match !== null) && (match.length > 0)) { console.log('x-axis label -->', e.targetID); } else { console.log('not x-axis label -->', e.targetID); } }); chart.draw(data, options); }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>