第1章 概述

　　在DataViz中，可以通过鼠标对图表进行一些高级功能的使用和操作。但是由于用户在使用过程中对这些功能使用频率的差异， 会希望可以通过配置调整这些功能的触发方式，所以我们提供了相应的配置，可以对鼠标左右键中的事件进行自定义。

第2章 配置方法

　　目前DataViz鼠标左键点击默认触发图表的【联动】功能，可以通过鼠标左右键触发的图表功能除了【联动】还有上卷、下钻、跳转页、钻透（详细信息）和图表数据功能。如果想配置这些已经实现了的功能需要修改配置文件dataviz-web/common/config.js,在该文件下找到如下位置：

  /**
   * null表示不启动，请使用[]自定义，放入当前功能项名称
   *  当前左键功能项有：linkage,
   *  右键事件有：rollUp, drillDown，drillThrough, chartData, linkPage, selectLevel，也包含custom中的各操作名
   */
  customMouseEvent: {
      // leftMouses: ['linkPage'],
      // rightMouses: ['rollUp', 'drillDown', 'drillThrough', 'chartData', 'selectLevel','linkage'],
      leftMouses: null,
      rightMouses: null
  },

　　其中customMouseEvent对象下的leftMouses和rightMouses表示鼠标左键和右键事件，中括号中的内容表示各自触发的功能，代表各功能的名称如下：

• 联动：linkage；
• 跳转页：linkPage；
• 上卷：rollUp；
• 下钻: drillDown；
• 钻透（详细数据）： drillThrough；

• 图表数据：chartData；

  我们拿右键显示图表数据作为例子，修改customMouseEvent对象为：

  /**
   * null表示不启动，请使用[]自定义，放入当前功能项名称
   *  当前左键功能项有：linkage,
   *  右键事件有：rollUp, drillDown，drillThrough, chartData, linkPage, selectLevel，也包含custom中的各操作名
   */
  customMouseEvent: {
      // leftMouses: ['linkPage'],
      // rightMouses: ['rollUp', 'drillDown', 'drillThrough', 'chartData', 'selectLevel','linkage'],
      leftMouses: null,
      rightMouses: ['chartData']
  },
  

  修改后效果如下图

除了我们默认提供的事件，我们也可以自定义自己的默认右键事件，首先修改customMouseEvent对象下的rightMouses属性，输入你需要的属性名称，比如‘customMENU1’，然后修改contextMenu对象的custom属性，依次根据提示修改name和callback属性，例子代码段如下。callback函数回调的过程中会向该回调函数的args变量进行赋值，值为你点击的图表部分的图表数据值。

customMouseEvent: {
            // leftMouses: ['linkPage'],
            // rightMouses: ['rollUp', 'drillDown', 'drillThrough', 'chartData', 'selectLevel','linkage'],
            leftMouses: null,
            rightMouses: ['customMENU1']
        },
        //右键菜单配置项
contextMenu: {
            //上卷
            rollUp: true,
            //下钻
            drillDown: true,
            //钻透（详细信息），支持自定义函数
            drillThrough: true,
            /** @param params {chartId: string, datasetId: string, chartBookId: string, userId: string, roleIds: Array, orgIds: Array} */
            //drillThrough: function (params) {
            //    return true;
            //},
            //图表数据
            showData: true,
            //自定义
            custom: [
                {
                 //显示名称
                 name: "customMENU1",
                 //执行函数，args为当前单击区域的信息
                 callback: function (args) {
                        alert('自定义菜单' + JSON.stringify(args));
                    }
                 }

            ]
        },

效果如下图：