时间戳

首页 > 解决方案 > 悬停事件上的谷歌图表自定义图例

javascript - 悬停事件上的谷歌图表自定义图例

问题描述

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

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

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

我的问题类似于这个问题：Google 图表调用 onmouseover 事件

而且我实际上是在尝试将所选答案中的代码改编为我的案例。但我做不到。

这是我的 html 页面的代码。

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

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

标签： javascripthtmljquerychartsgoogle-visualization

解决方案

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

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

要在悬停图例时突出显示系列，
我们需要提供系列的列号，
而不是与“饼图”关联的行。
我们需要提供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>

推荐阅读