Наведите курсор на Google Chart, ведущий себя странно на Firefox

При добавлении события hover к элементу svg Google chart результаты Firefox и Chrome отличаются (Chrome делает то, что я ожидал). Я хотел бы добиться того, чтобы пользователь мог парить на графике и не заботиться о том, насколько близко он находится к линии - курсор должен быть плавным и простым в использовании.

Вот соответствующий плункер: https://plnkr.co/edit/2IF2BnX0tS2wznAUr5bs?p=preview

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
    <script>
    google.charts.load('current', {
        callback: drawChart,
        packages: ['corechart']
    });

    function drawChart() {
        var dataTable = new google.visualization.DataTable({
            cols: [
                { id: 'x', label: 'Num', type: 'number' },
                { id: 'y', label: 'Fn', type: 'number' }
            ]
        });

        for (var i = 0; i < 1000; i++) {
            var xValue = { v: i };
            var yValue = { v: i };

            // add data row
            dataTable.addRow([
                xValue,
                yValue
            ]);
        }

        var container = document.getElementById('chart_div');
        var chart = new google.visualization.ChartWrapper({
            chartType: 'LineChart',
            dataTable: dataTable,
            options: {
                hAxis: {
                    gridlines: {
                        color: 'transparent'
                    },
                    title: 'Hover here is also fine'
                },
                tooltip: {
                    trigger: "none"
                },
                vAxis: {
                    gridlines: {
                        color: 'transparent'
                    },
                    title: 'Hover here is OK'
                }
            }
        });

        // add hover line
        google.visualization.events.addOneTimeListener(chart, 'ready', function () {
            var svgParent = container.getElementsByTagName('svg')[0];
            var layout = chart.getChart().getChartLayoutInterface();
            var lineHeight = layout.getBoundingBox('chartarea').height - 18;
            var lineTop = layout.getBoundingBox('chartarea').top;

            var hoverLine = container.getElementsByTagName('rect')[0].cloneNode(true);
            hoverLine.setAttribute('y', lineTop);
            hoverLine.setAttribute('height', lineHeight);
            hoverLine.setAttribute('width', '1');
            hoverLine.setAttribute('stroke', 'none');
            hoverLine.setAttribute('stroke-width', '0');
            hoverLine.setAttribute('fill', '#cccccc');
            hoverLine.setAttribute('x', 0);
            svgParent.appendChild(hoverLine);

            svgParent.addEventListener("mousemove", function (e) {
                hoverLine.setAttribute('x', e.offsetX);
            });
        });

        chart.draw(container);
    }
</script>
<div id="chart_div"></div>

Наведите курсор на график с хромом, чтобы увидеть ожидаемое поведение. Наведите курсор на график с Firefox, чтобы увидеть проблему. Есть идеи, как это решить? это ошибка в Google Chart? Я добавляю прослушиватель событий не к тому элементу?

Источник

1 ответ

Решение

Кажется, что дочерние теги в вашем svg захватывают события mousemove (что происходит из-за распространения событий).

Просто добавьте указатель-события: ни одного в эти дочерние элементы (я рекомендовал использовать идентификатор для этого элемента svg)

svg *{
  pointer-events: none;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
     <script src="https://www.gstatic.com/charts/loader.js"></script>
  </head>

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

function drawChart() {
  var dataTable = new google.visualization.DataTable({
    cols: [
      {id: 'x', label: 'Num', type: 'number'},
      {id: 'y', label: 'Fn', type: 'number'}
    ]
  });

  for (var i = 0; i < 1000; i++) {
    var xValue = { v: i };
    var yValue = { v: i };

    // add data row
    dataTable.addRow([
      xValue,
      yValue
    ]);
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    dataTable: dataTable,
    options: {
      hAxis: {
        gridlines: {
          color: 'transparent'
        },
        title: 'Hover here is also fine'
      },
      tooltip: {
        trigger: "none"
      },
      vAxis: {
        gridlines: {
          color: 'transparent'
        },
        title: 'Hover here is OK'
      }
    }
  });

  // add hover line 
  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    var svgParent = container.getElementsByTagName('svg')[0];
    var layout = chart.getChart().getChartLayoutInterface();
    var lineHeight = layout.getBoundingBox('chartarea').height - 18;
    var lineTop = layout.getBoundingBox('chartarea').top;

    var hoverLine = container.getElementsByTagName('rect')[0].cloneNode(true);
    hoverLine.setAttribute('y', lineTop);
    hoverLine.setAttribute('height', lineHeight);
    hoverLine.setAttribute('width', '1');
    hoverLine.setAttribute('stroke', 'none');
    hoverLine.setAttribute('stroke-width', '0');
    hoverLine.setAttribute('fill', '#cccccc');
    hoverLine.setAttribute('x', 0);
    svgParent.appendChild(hoverLine);
    
    svgParent.addEventListener("mousemove", function(e) {
      hoverLine.setAttribute('x', e.offsetX);
    });
  });

  chart.draw(container);
}
</script>
<div id="chart_div"></div>
</body>
</html>

Источник
Другие вопросы по тегам