Question

将鼠标移到另一个图表上时，如何突出线图上的点。

当我将鼠标移到它上面时，我需要来自一个图表的信息，以便将所选数据发送到另一个图表以突出显示另一个图表中的点。

e.g。图表1的鼠标悬停在x：3 y：5。它会触发事件以突出显示另一个图表行。然后在图表2中突出显示x：3 y：5值。

Answer 1

我明白了。您需要在'elementMousemove'事件的原始图表中添加事件派发。在这种情况下，您需要突出显示另一个图表上所需的值。

chart.interactiveLayer.dispatch.on('elementMousemove.name', function(e) {
      chart2.lines.clearHighlights();
      chart2.lines.highlightPoint(0,parseInt(xIndex),true); 
});
chart.interactiveLayer.dispatch.on('elementMouseout.name', function(e) {
            chart2.lines.clearHighlights();
});

chart中任何mosemove事件的代码将清除之前的高亮显示，并突出显示line ='0'处的点和chart2中指定的XIndex。

Answer 2

使用Angularjs-nvd3-directives参与相同问题的人

        $scope.$on('tooltipShow.directive', function(angularEvent, event){
          $scope.selectedChartData = [];
          angularEvent.targetScope.$parent.event = event;
          angularEvent.targetScope.$parent.$digest();
          index= xIndex; //see the above answer

          angularEvent.targetScope.chart.lines.clearHighlights();
          angularEvent.targetScope.chart.lines.highlightPoint(0,parseInt(index),true);

          recursivelyCheckPreviousSibling(angularEvent.targetScope, index);
          recursivelyCheckNextSibling(angularEvent.targetScope, index);
        });

function recursivelyCheckPreviousSibling(targetScope, index){
      //exit condition
      if( targetScope.$$prevSibling == null) {
        targetScope.chart.lines.clearHighlights();
        targetScope.chart.lines.highlightPoint(0,parseInt(index),true);
      }
      else{
        targetScope.$$prevSibling.chart.lines.clearHighlights();
        targetScope.$$prevSibling.chart.lines.highlightPoint(0,parseInt(index),true);
        recursivelyCheckPreviousSibling(targetScope.$$prevSibling, index);
      }
    };
    function recursivelyCheckNextSibling(targetScope, index){
      //exit condition
      if( targetScope.$$nextSibling == null) {
        targetScope.chart.lines.clearHighlights();
        targetScope.chart.lines.highlightPoint(0,parseInt(index),true);
      }
      else{
        targetScope.$$nextSibling.chart.lines.clearHighlights();
        targetScope.$$nextSibling.chart.lines.highlightPoint(0,parseInt(index),true);
        recursivelyCheckNextSibling(targetScope.$$nextSibling, index);
      }
    };

NVD3.js在mouseover事件中突出显示图形点

2 个答案: