图表下钻

更新时间:2019-04-16

注意:下钻功能目前只在报表中可用,大屏中不支持图表的下钻,您可以使用下一章节的「图表联动」来达到类似的效果!

下钻是指在点击本图表的某一部分时,可以打开一个新的图表或超链接,进而查看与图表此部分相关的详细信息。Sugar支持无限层级的下钻,只要下钻的弹出展示的图表也是支持下钻的,就可以继续配置进一步的下钻。

在编辑报表时,某些图表的控制面板里可以看到「下钻」选项卡:

图片

下钻的触发

每种图表触发下钻的方式不同,例如:折线图的触发方式是点击折线上的某一点,地图是点击某个区域,表格是点击某行或某列。

总体来说,可以下钻的图表分为两大类:

  • 单一种类下钻:这种类型的图表只能触发一种类型的下钻。比如饼图图,点击饼图和每个区域下钻弹出一个柱状图,并且根据点击区域的不同让柱状图中的数据而不同,触发下钻时,饼图传递给下钻柱状图的下钻参数会自动根据您点击位置的不同而不同。这类图表的下钻配置只需要选择触发的下钻图表类型即可:

图片

  • 多种类下钻:这种类型的图表可以触发多种类型的下钻。比如表格,可以设置点击每行触发下钻,点击某行中的某一列触发下钻。此时表格下钻需要填写具体是那一列要触发下钻:

图片

下钻的参数

当图表的下钻被触发时,打开的下钻图表会收到与上层图表点击区域相关的下钻参数,下钻图表可以利用这个信息来动态拉取数据。

当然,报表的过滤条件在下钻图表中依然可以使用,与普通图表的使用方式相同。

下钻参数不需要用户进行配置,每种图表触发下钻时传递给下层图表的参数格式是固定的,大体格式如下:

[
    {
        "item": {
            "name": "老用户",
            "value": 11472,
            "category": "2018-09-01",
            "_sugar_dd_default_": "2018-09-01"
        },
        "fireKey": ""
    },
    {
        "item": {
            "subsys": "北京总部",
            "module": "市场部",
            "business": "第一小分队",
            "name": "李四",
            "value": 7673456.78,
            "value_level": "green",
            "url": "http://www.baidu.com",
            "_sugar_dd_default_": "李四"
        },
        "fireKey": "name"
    }
]
  • 总体来说下钻参数是一个数组,当有多层下钻时,数组里包含每一层图表传递给下层的参数,这些参数在下钻图表中都是可以使用的
  • 下钻参数的每一项由itemfireKey组成

    • item是一个对象,里面有下钻相关的具体信息,比如触发下钻的表格某行的数据。
    • fireKey是一个字符串,在某种图表可以触发多种下钻的情况下用来区分触发的是哪一种下钻,一般用不到

每种图表在下钻时,传递给下钻的下层图表的参数都是不同的,您需要在下钻图表的数据中进行调试,详见「下钻参数在哪里看」。

下钻参数的使用

如果下钻图表是使用API方式拉取数据的,那么下钻参数会自动放在API请求的body中发送到用户的API后端,用户在API中利用这些参数拉取数据即可,详见「图表API请求中的下钻参数

如果下钻图表是使用SQL方式拉取数据的,那么可以将下钻参数嵌入到下钻图表绑定的SQL模型的SQL语句中,具体的语法请参照「SQL语句中嵌入下钻参数

柱状图的下钻示例

柱状图只能配置一种下钻,在配置中只需要开启下钻,并选择下钻图表类型即可,这里选择的是「折线图」:

图片

点击柱状图的某一个柱子,会弹出下钻图表的编辑弹框:

图片

点击数据选项卡中的调试按钮,可以就看到下钻参数了,也就是刚才我们点击的柱子的详细信息:

图片

接下来在这个下钻展示的折线图的数据绑定时,无论是API还是SQL方式都可以使用这个下钻的参数了,见下钻参数的使用

表格下钻示例

表格可以配置多个下钻,总的开关可以控制所有下钻是否开启,单个下钻也可以控制自己的开关,如果删除了某个下钻,下钻的图表配置以及其更深层次的下钻图表配置都会被删除:

图片

上图示例中的表格配置了两个下钻:

  1. 第一个下钻是点击表格的任何一行,触发下钻,并且弹出一个饼图,点击上图中的表格任何一行,即可看到:

图片

点击「调试」可以看到您点击的那一行的全部数据都传递到了下钻的饼图中:

图片

接下来就可以在API或SQL拉取这个饼图数据时利用这些下钻参数了。

  1. 第二个下钻配置的是表格中「姓名」一列,现在点击姓名列的某一个值会触发一个折线图类型的下钻:

图片

点击「调试」,可以看到点击行的详细数据,以及是点击哪个列触发的下钻:

图片

接下来就可以在API或SQL拉取这个折线图的数据时利用这些下钻参数了。

上一篇形状

本页内容