Question

当我点击angular-nvD3 Stacked Area Chart时，我试图阻止默认行为。我设法访问了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），但我需要阻止点击事件的发生。

Answer 1

我知道这是一个老问题，但是我的项目遇到了这个问题，这就是我解决它的方法。

似乎无法使用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/JNYJwx Codepen上的图表更新似乎有一个小故障，但你明白了这一点：）

希望它有所帮助！

Answer 2

你很亲密。 CSS pointer-events:none;的缺点是它会关闭每个指针事件（最重要的是悬停，鼠标中心和鼠标移出）。

所以恕我直言，你应该避免使用它。

其实你很亲密。您不应该将it-does-nothing函数传递给options.chart.stacked.dispatch.areaClick，而是将null或undefined传递给//chart events stacked: { dispatch: { areaClick: void 0 } }。像这样：

<div class="right-align">
    <a (click)="updateUserProfile(editUserForm.value)" class="waves-effect waves-light btn submit-btn">
      <i class="material-icons right">done</i>Aktualisieren
    </a>
</div>

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

修改

原来我错了。它解决了因为它遇到了阻止事件的错误。所以你可以抛出一个错误，一切都很好...... :)

还找到了一种解决方法但导致内存泄漏，所以我不会分享它。

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

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

2 个答案: