hover 事件上的谷歌图表自定义图例

Question

我正在使用 Google Chart API 以折线图显示我的数据。

因为我对图例有一些特殊的需求，所以我将图表的原始图例设置为none ，然后按照我想要的方式显示自己的图例。

一切正常，除了一件事，我想实现legend hovering function ，当您 hover 图表原始图例的特定行时，相关行被选中并显示得更粗。

我的问题类似于这个问题： Google charts invoke onmouseover event

实际上，我正在尝试根据我的案例调整所选答案中的代码。 但我做不到。

这是我的 html 页面代码的小提琴。

$('#legend tr').hover在我 hover 图例时被正确触发，因为如果我添加一个alert($(this).data('row'))我会得到正确的data-row值显示在警报框。 但是图表上没有任何反应。 好像chart.setSelection()不工作或什么的。

如何修改我的代码以处理 hover 事件？

Answer 1

折线图的工作方式与提供的示例中显示的饼图不同。

饼图只能有一个系列。
而折线图可以有多个系列。

悬停图例时突出显示系列，
我们需要提供系列的列号，
而不是与“饼图切片”关联的行。
我们需要提供null作为行索引...

请参阅以下工作片段...

 google.charts.load('current', { 'packages': ['line'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Day'); data.addColumn('number', 'Yes'); data.addColumn('number', 'No'); data.addRows([ ['19/11/2020 \n 02:48:16', 1.2, 1.6], ['19/11/2020 \n 02:48:22', 1.2, 1.6], ['19/11/2020 \n 02:48:28', 1.3, 1.6] ]); var options = { legend: { position: 'none' }, height: '100%', width: '100%', vAxis: { viewWindow: { min: 1, max: 1.95, } }, colors: ['#1976D2','#E53935'] }; var chart = new google.charts.Line(document.getElementById('linechart_material')); chart.draw(data, google.charts.Line.convertOptions(options)); $('#legend tr').hover(function () { chart.setSelection([{ column: $(this).data('column'), row: null }]); }, function () { chart.setSelection([]); }) }

 .color { width: 2.5rem; height: 1.5rem; border-radius: 0.1875rem; } #linechart_material { width: 500px; height:200px; padding-top:5px; }.title { margin-bottom: -0.0005rem; }.subtitle { color: gray; font-size: 16px; }.state { width: 2.5rem; height: 1.5rem; border-radius: 0.1875rem; color: white; margin-left: 3px; padding-left: 5px; padding-right: 5px; padding-bottom: 4px; font-weight: 600; }.state-open { background-color: #00ba54; }.state-closed { background-color: #d00000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="linechart_material"></div> <table class="table-hover"> <tbody id="legend"> <tr data-column="1"> <td> <div class="color" style="background-color:#1976D2"></div> </td> <td style="padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:5px;"> Yes </td> <td> 1.3 </td> </tr> <tr data-column="2"> <td> <div class="color" style="background-color:#E53935"></div> </td> <td style="padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:5px;"> No </td> <td> 1.6 </td> </tr> </tbody> </table>