图表交互

静态图表最大的问题就是缺少交互性，例如点击某个区域触发事件。在Datav中，我们对常用图表都进行了点击事件的支持，可以通过js编码的方式来完成。

开始之前，你应该已经创建好基于Prometheus或者其它数据源的Graph图表，进入图表编辑页面，找到右边的设置面板,拉到最下方有一个Click event。

Click event函数

点击事件是通过该函数触发的，函数如下方所示：

function(data, history, setVariable, setTime)   {
}

data是点击区域所包含的点数据，history用来控制页面跳转行为， setVariable用来设置模版变量， setTime用来设置当前时间范围，因此我们的点击事件目前可以实现以下的效果：

1. 前往某一个页面: 实现页面下钻
2. 设置某一个模版变量: 实现图表联动，例如你点击一个饼图，设置当前的app变量为点击的值，那么其它图表就可以随着app变量一起联动变化

触发点击事件

这里首先点击Enable click event来开启点击事件，开启后，尝试点击图表上的一个点，会看到如下弹框：

然后点击Trigger click event，就可以成功触发我们设置的事件了。

data用法

data就是我们点击的具体的那个点的详细数据，到此为止大家应该已经发现，关键就是在data身上，它决定了我们要前往哪个url，也决定了我们要设置变量的值为什么，因此我们需要从data数据中取出想要的那个值。其实很简单，只要打印出data，然后根据data所包含的内容，去获取想要的值即可。

function(data, history, setVariable, setTime)   {
   // 打印data数据结构
   console.log(data)
}

history用法

history是抽象出的一个javascript对象，使用它，我们可以实现页面跳转、获取当前url等操作, 如果你想查看该history对象的内容和用法，可以使用console.log进行输出：

function(data, history, setVariable, setTime)   {
    console.log(history)
}

常用的用法:

function(data, history, setVariable, setTime)   {
    // 前往某个页面
    history.push('https://google.com')

    // 使用当前url
    const currentUrl = history.location.pathname
}

setVariable用法

该函数很简单，就是把指定的模版变量设置为指定的值，例如设置当前的app变量的值为gateway:

function(data, history, setVariable, setTime)   {
   setVariable('app','gateway')
}

setTime用法

用来设置当前的时间范围，需要传两个参数，一个起始时间，一个截止时间

function(data, history, setVariable, setTime)   {
  // 使用字符串进行设置
  setTime('2020-12-07 00:00:00', '2020-12-08 00:00:00')
  // 使用时间戳(必须是毫秒)进行设置
  setTime(1607270400000, 1607443199000)
}

支持点击的插件

不是所有的图表插件都支持点击事件，目前支持的有：

• Graph
• Table
• Dependency graph
• Echarts