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);

我设置了超时，请务必在进行更改时使用图表API。

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

此处的工作示例:https://codepen.io/mvidailhet/pen/JNYJwx Codepen 上的图表更新似乎出现了问题，但您明白了:)

希望对你有帮助!