javascript - 防止 Angular nvD3 堆积面积图中的点击事件

Question

当我点击 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)，但我需要防止点击事件发生。

Answer 1

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

似乎无法使用 angular-nvd3 禁用这些事件。您必须使用 NVD3 禁用它们。

获取 angular-nvd3 图表上可用的图表 api 对象，并禁用绑定(bind)到此 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 上的图表更新似乎有问题，但你明白了:)

希望对您有所帮助!