防止角nvD3堆叠面积图中的点击事件

Prevent click event in angular nvD3 Stacked Area Chart

本文关键字：事件 面积图 nvD3      更新时间：2023-09-26

当我点击angular-nvD3堆叠面积图时，我试图阻止默认行为。我设法访问onclick功能，但我不知道如何防止事件(修改图形)发生。我不希望图形在用户点击时发生变化。

. js: 

$scope.stackedAreaChartOptions = {
  chart: {
    type: 'stackedAreaChart',
    height: 450,
    margin : {
      top: 20,
      right: 20,
      bottom: 30,
      left: 40
    },
    x: function(d){return d[0];},
    y: function(d){return d[1];},
    useVoronoi: false,
    clipEdge: true,
    duration: 100,
    useInteractiveGuideline: true,
    xAxis: {
      showMaxMin: false,
      tickFormat: function(d) {
        return d3.time.format('%H:%M')(new Date(d))
      }
    },
    yAxis: {
      tickFormat: function(d){
        return d3.format(',.2f')(d);
      }
    },
    zoom: {
      enabled: false,
      scaleExtent: [1, 10],
      useFixedDomain: false,
      useNiceScale: false,
      horizontalOff: false,
      verticalOff: true,
      unzoomEventType: 'dblclick.zoom'
    },
    //chart events
    stacked: {
      dispatch: {
        areaClick:
        function (t,u){ null; console.log("areaClick");}
        ,
        areaMouseover:
        function (t,u){ null; console.log("areaMouseover");}
        ,
        areaMouseout:
        function (t,u){null; console.log("areaMouseout");}
        ,
        renderEnd:
        function (t,u){null; console.log("renderEnd");}
        ,
        elementClick:
        function (t,u){null; console.log("elementClick");}
        ,
        elementMouseover:
        function (t,u){null; console.log("elementMouseover");}
        ,
        elementMouseout:
        function (t,u){ null;console.log("elementMouseout");}
      }
    },
    controlLabels: {stacked:"Absoluto", expanded:"Relativo"},
    controlOptions:
    [
      "Stacked",
      false,
      "Expanded"
    ]
  },
  title: {
    enable: true,
    text: '',
    css: {
      'font-weight': 'bold'
    }
  },
  caption: {
    enable: true,
    html: 'Visualización por horas de acceso a noticia',
    css: {
      'text-align': 'center',
      'margin': '2px 13px 0px 7px',
      'font-style': 'italic'
    }
  }
};
HTML: 

<nvd3 options="stackedAreaChartOptions" data="stackedAreaChartData" api="api"></nvd3>

当我单击图形时，将显示消息(console.log)，但我需要防止发生单击事件。

我知道这是一个老问题，但是我在我的项目中遇到了这个问题，下面是我如何解决它的

似乎不可能使用angular-nvd3来禁用这些事件。您必须使用NVD3禁用它们。

获取angular-nvd3图表上可用的图表api对象，并禁用与此api绑定的图表对象上的事件:

HTML 

<nvd3 options="options" data="data" api="chartAPI"></nvd3>
Javascript 

 $timeout( function() {
  if ($scope.chartAPI) {
    var chart = $scope.chartAPI.getScope().chart;
    chart.stacked.dispatch.on('areaClick.toggle', null);
    chart.stacked.dispatch.on('areaClick', null);
  }
}, 1000);

我做了一个超时，确保在做更改时有chartAPI。

注意:当你更新或刷新图表(chart.refresh())时，似乎你必须再次禁用这些事件。

这里的工作示例:https://codepen.io/mvidailhet/pen/JNYJwxCodepen上的图表更新似乎有一个小故障，但你明白了:)

希望有帮助!

你差一点。CSS pointer-events:none;的缺点是它关闭每个指针事件(最重要的是悬停，mouseenter和mouseout)。

所以我认为你应该避免使用它。

其实你很接近。您不应该将一个除了null或undefined之外什么都不做的函数传递给options.chart.stacked.dispatch.areaClick。这样的:

//chart events
stacked: {
    dispatch: {
        areaClick: void 0
    }
}

我遇到了同样的问题，花了一个多小时才解决。

编辑

结果证明我错了。它解决只是因为它遇到了一个阻止事件的错误。所以你可以抛出一个错误，一切都很好……:)

还发现了一个解决方案，但会导致内存泄漏，所以我不会分享。

我的解决方案是:接受它应用click事件并隐藏所有其他层。问题太小，不需要投入更多的时间和精力。

相关文章：