条件渲染

如果你想基于某个条件来显示或隐藏一个图表，那这篇文档就很适合。

从上面的视频我们能看出：仪表盘中有两个图表，一个是 NodeGraph ，用于展示依赖关系图，另一个是表格，是具体的依赖数据，因此它们是同一套数据的两种展示形式。都很有用。

但是我们不想同时展示这两个图表，因为这样会占用太多的空间。因此需要用一个条件来控制它们的显示和隐藏。

​

前置需求

在开始前，需要做一些准备：

1. 部署 Jaeger
2. 在 xObserve 中添加 Jaeger 数据源
3. 使用 Jaeger 提供的 hotrod 生成一些 traces

其实这些也不是必须的，只不过如果你想一步一步跟着完成，那这些就是需要的

如果你只是想尝试条件渲染，那么你可以创建两个任意类型的图表，然后跳过前面的步骤，直接从 添加条件 开始

​

创建两个图表

​

创建 NodeGraph 图表

新建一个图表，选择 NodeGraph 类型，然后设置它的数据源为 Jaeger，可以看到:

​

创建 Table 图表

再次新建一个图表，选择 Table 类型，也设置为 Jaeger 数据源：

回到仪表盘页面，此时已经有两个图表，它们同时被显示出来。

​

添加条件

目前的 xObserve 只能使用变量来作为条件，因此，我们需要创建一个名为 view 的变量，它有两个值：nodegraph 和 table。

如果你忘记了如何创建 Custom 类型的变量，请阅读 这篇文档。

​

为图表设置渲染条件

我们需要为两个图表都设置渲染条件，先从 NodeGraph 开始。

打开 NodeGrapl 的图表编辑面板，点击 图表 标签页，展开 基本设置 部分，找到 条件渲染，然后填写如下：

条件值 view=nodegraph 表示只有当 view 变量的值为 nodegraph 时才渲染这个图表。

同样的，为 Table 也添加上条件，只不过条件值要改为 view=table。

​

测试

现在我们可以测试一下了，将 view 变量的值改为 nodegraph，此时 Table 图表就会消失，只剩下 NodeGraph 图表，而将 view 改为 table, Table 将留下， NodeGraph 消失。