Question

我目前正在使用Angular NVD3 wrapper。

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

怎么做？

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

Answer 1

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

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

我把所有这些放在一个带有角度路由的plunker中，以展示它是如何工作的。您可以导航到另一个链接并返回到图表页面，看到图例状态是否持久存在。请检查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捕获流图例上的Click-Event？

1 个答案: