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

Question

我目前正在使用Angular NVD3 wrapper。

我找不到捕获流图例上的 Click-Event 的方法（在下图中以红色突出显示）。

怎么做？

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

Answer 1

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

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

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

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

相关代码sn-p如下：

                //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 中，但不推荐使用它，因为它会污染全局范围。因此，我使用了 service 。如果您对逻辑有任何疑问，请告诉我。您也可以以类似的方式添加更多逻辑来处理双击事件。

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