javascript - 当图例条目具有焦点，线和点都显示在Google折线图中时，取消十字准线-Google Visualization API

十字线是Google图表的一个漂亮功能，但是如果您为强调单个点的折线图启用了十字线（通过将pointSize设置为稍微大于lineWidth），则它们会产生令人不快的事情：当用户将鼠标悬停在相应的光标上时图例条目，十字线将出现在该图形轨迹中的每个数据点！如果在该迹线中有数百个数据点，则同时出现数百个十字准线将使您一团糟。

对于未设置pointSize的折线图，这是不会发生的（即，只有折线而不是实际数据点可见）。

在通过设置pointSize使点可见的折线图中，是否有任何方法可以使十字准线仅出现在图形上的数据点上，而不是鼠标悬停在图例上？

将鼠标悬停在数据点之一上时，图形如下所示：

http://www.sealevel.info/crosshairs_problem1.png



将鼠标悬停在相应的图例条目上时的外观如下：

http://www.sealevel.info/crosshairs_problem2.png



如您所见，十字准线几乎覆盖了其他所有内容。

这是生成此图的网页：

http://sealevel.info/crosshairs_problem.html?=1&quadratic=0&lin_PI=1&boxcar=1&boxwidth=3&lin_ci=1&g_date=1930/1-2019/12&c_date=1950/1-2009/12&s_date=1930/1-2018/12

最佳答案

使用图表的'onmouseover'事件的组合，
和一个突变观察者，我们可以防止传说中的十字准线悬停

传递给'onmouseover'事件的属性包括行和列
已经“悬停”的数据点

在图例上悬停->行将为null

然后使用变异观察器找到新的十字线svg path元素
并将其颜色更改为'transparent'

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

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart(transparent) {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y');

  for (var i = 0; i < 100; i++) {
    data.addRow([
      Math.floor(Math.random()*100),
      Math.floor(Math.random()*100)
    ]);
  }

  var options = {
    crosshair: {
      trigger: 'both'
    },
    legend: {
      position: 'bottom',
      textStyle: {
        bold: true,
        fontSize: 20
      }
    }
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ScatterChart(chartDiv);

  var legendHover = false;

  google.visualization.events.addListener(chart, 'onmouseover', function (gglEvent) {
    // row property will be null on legend hover
    legendHover = (gglEvent.row === null);
  });

  google.visualization.events.addListener(chart, 'onmouseout', function (gglEvent) {
    legendHover = false;
  });

  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      mutation.addedNodes.forEach(function (node) {
        if (node.tagName === 'g') {
          node.childNodes.forEach(function (child) {
            if ((child.tagName === 'path') && (legendHover)) {
              child.setAttribute('stroke', 'transparent');
            }
          });
        }
      });
    });
  });
  observer.observe(chartDiv, {
    childList: true,
    subtree: true
  });

  chart.draw(data, options);
}

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

编辑

在选择图例然后移动鼠标后，以上方法未能删除十字准线

请参阅以下工作片段以防止此行为
唯一的缺点是，选择图例/所有点时不会出现十字线

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

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart(transparent) {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y');

  for (var i = 0; i < 100; i++) {
    data.addRow([
      Math.floor(Math.random()*100),
      Math.floor(Math.random()*100)
    ]);
  }

  var options = {
    crosshair: {
      trigger: 'both'
    },
    legend: {
      position: 'bottom',
      textStyle: {
        bold: true,
        fontSize: 20
      }
    }
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ScatterChart(chartDiv);

  var legendHover = false;
  var selection;

  google.visualization.events.addListener(chart, 'onmouseover', checkLegendHover);
  google.visualization.events.addListener(chart, 'onmouseout', checkLegendHover);

  function checkLegendHover(gglEvent) {
    legendHover = false;
    selection = chart.getSelection();
    if (selection.length > 0) {
      legendHover = (selection[0].row === null);
    }
    if (!legendHover) {
      legendHover = (gglEvent.row === null);
    }
  }

  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      mutation.addedNodes.forEach(function (node) {
        if (node.tagName === 'g') {
          node.childNodes.forEach(function (child) {
            if ((child.tagName === 'path') && (legendHover)) {
              child.setAttribute('stroke', 'transparent');
            }
          });
        }
      });
    });
  });
  observer.observe(chartDiv, {
    childList: true,
    subtree: true
  });

  chart.draw(data, options);
}

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

关于javascript - 当图例条目具有焦点，线和点都显示在Google折线图中时，取消十字准线-Google Visualization API，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40158642/