Google 关于悬停事件的图表自定义图例

Question

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

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

除一件事外一切正常，我想实现 legend hovering function 当您将鼠标悬停在图表原始图例的特定行时，相关行会被选中并显示得更粗。

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

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

这里是a fiddle with the code of my html page.

当我将鼠标悬停在图例上时，$('#legend tr').hover 会正确触发，因为如果我添加 alert($(this).data('row'))，我会在警告框中显示正确的 data-row 值。但是图表上没有任何反应。 chart.setSelection() 似乎无法正常工作。

如何修改我的代码来处理悬停事件？

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>

Google 关于悬停事件的图表自定义图例

Google chart custom legend on hover event

html

javascript

jquery

charts

google-visualization