Tailwind CSS on GitHub
EN中文

Graph

Graph图表插件是Datav最核心的图表,可以实现时序数据的曲线图、柱状图、点图的展示,往往配合prometheus、influxdb等时许数据库使用, 在本章节中,我们将结合prometheus进行示例讲解。

前置准备

  1. 安装prometheus服务
  2. 在Datav中创建基于prometheus的数据源
  3. 创建一个仪表盘 -> 创建图表 -> 进入图表编辑页面
  4. 选择prometheus数据源,输入查询语句scrape_duration_seconds

此时,能看到图表已经渲染出来,如下图所示:

Image

继续保留在当前页面

Graph配置

在右边一栏,可以配置当前图表的属性,包括曲线、柱状、填充、精度、坐标轴等等,这里就不展开细讲,大家可以根据配置的注释自己尝试下。

Thresholds

Thresholds是图表阈值,具体表现就是一条线,大于或者小于这条线的区域用特殊颜色进行标记,我们来创建一条Thresholds:

  1. 点击 + Add threshold,然后对新添加的表项进行编辑
  2. gt(大于)/lt(小于),选择gt
  3. 值填写0.2
  4. Color选择critical的红色
  5. 开启Fill,表示对大于0.2的区域进行填充
  6. 开启Line,是一条y=0.2的直线
  7. 选择Left坐标轴,因为目前我们只有Left

最终设置完后,是这样的:

Image

代表的含义是: 把曲线值大于0.2的区域填充为critical颜色(红色),同时对0.2这条线进行标记。

对应的效果就是:

Image

当我们为Graph添加告警时,也会自动创建一个对应告警值的Threshold

Click event

图表交互章节有详细说明,因此这里简单进行介绍。

当开启Click event后,点击图表上的点,会触发点击事件,具体的事件就在这里进行定义,来看一个例子,输入以下事件代码:

function(data, history, setVariable, setTime)   {
    alert('click graph point!')
    console.log(data)

    // 设置模版变量
    // setVariable('app','gatewayt')

    // 跳转到其它页面
    // history.push('/')

    // 设定当前时间
    // setTime('2020-12-09 00:00:00', '2020-12-10 00:00:00')
}

然后点击图表上的点,可以看到以下弹出面板:

Image

点击Trigger click event,就能看到我们设置的事件了。

可以为图表创建外部链接,方便进行外部关联。

该链接是图表上的点的链接,当点击某个点的时候会弹出面板,然后点击前往链接。

先来创建一条链接:

  1. 点击添加链接
  2. 输入标题、Url然后保存提交

此时点击图表上的点,在弹出面板就能看到刚才创建的test链接。

外部链接

该链接是图表级的,设置后,在图表的左上角会有一个小图标,鼠标悬浮上去即可看到

图表注释

Graph允许我们给图表添加注释,在图表上标记出:在某个时间点发生了什么事情,先创建一个注释:

  1. 点击图表,弹出面板
  2. 点击添加注释,弹出注释面板
  3. 输入内容,点击保存

此时在图表上出现了一条蓝色的竖直线,就是刚才创建的注释,将鼠标悬浮在那条线的底部三角区域,可以看到注释的详细内容,同时可以进行再次编辑。

Image