如何使用 Angular NVD3 MultiBar Chart 在流图例上捕获点击事件？

Question

我目前正在使用 Angular NVD3 wrapper。

我找不到捕捉流图例上的点击事件的方法（下图中以红色突出显示）。

怎么做？

目标是即使在页面重新加载后也能保持未选择的流禁用。

Answer 1

您必须从服务设置图例状态，然后使用 nvd3 图表选项中的回调服务根据服务设置初始图例状态。

然后，需要捕获图例单击事件，并相应地更改服务中的数组。 NVD3 已经提供了图例事件来捕获这些。

我将所有这些放在一个带有 angular 路由的 plunker 中以演示它是如何工作的。您可以导航到另一个 link 并返回图表页面，并看到图例状态已保留。请检查plunker：

http://plnkr.co/edit/V0WRMHd2zpya0lsjfFPy?p=preview

相关代码片段如下：

                //legend events
                    legend: {   
                        dispatch: {   
                          //legend single click event
        legendClick: function(e) {

  /**below are the different scenarios and we are setting the array value accordingly. You can probably
  make it dynamic by writing a for loop based on the number of streams you have, rather than hardcoding
  **/
          if(e.key == "Stream0" && e.disabled)  {
            console.log('Stream0 enabled');
          getChartProperties[0]=0;
          }
                 if(e.key == "Stream1" && e.disabled) {
                   console.log('Stream1 enabled');
          getChartProperties[1]=0;
                 }
                 if(e.key == "Stream2" && e.disabled) {
                     console.log('Stream2 enabled');
          getChartProperties[2]=0;
                 }
                 if(e.key == "Stream0" && !e.disabled) {
                     console.log('Stream0 disabled');
          getChartProperties[0]=1;
                 }
                 if(e.key == "Stream1" && !e.disabled) {
                     console.log('Stream1 disabled');
          getChartProperties[1]=1;
                 }
                 if(e.key == "Stream2" && !e.disabled) {
                     console.log('Stream2 disabled');
          getChartProperties[2]=1;
                 }
                 console.log(getChartProperties);
        },
         //legend double click event
        legendDblclick: function(e) {console.log(e)},
        legendMouseover: function(e) {},
        legendMouseout: function(e) {},
        stateChange: function(e) {}
      }
    },
    /**callback function to set the initial state of legend from the service "getChartProperties" which returns the 
    array . Below, disabled is set to [0,0,0] from service. Note that in javascript 0 is false, hence disabled 
    is [false,false,false], which means the legend is enabled. If its 1, then its disabled:true and the legens will be
    disabled
     **/
                callback: function(chart){
                  chart.dispatch.changeState({disabled:getChartProperties})
                }
            }
        };

希望这个解决方案就是您要找的。您也可以使用 $rootScope 将变量保存在 angularJS 中，但不推荐这样做，因为它会污染全局范围。因此，我使用了一个服务。如果您对逻辑有任何疑问，请告诉我。您可以添加更多逻辑以类似方式处理双击事件。

注意：当3个图例全部禁用时，NVD3再次启用所有图例，但数组为[1,1,1]，之后没有响应。您可能也必须处理它。

如何使用 Angular NVD3 MultiBar Chart 在流图例上捕获点击事件？

How to catch the Click-Event on the stream legend with Angular NVD3 MultiBar Chart?

angularjs

angular-nvd3