数据转换

如果 API 返回的数据格式和图表需要的数据格式不一致，可以配置数据转换脚本，将 API 返回的数据转换成图表需要的数据格式。

JSONPath 语法

要求 API 返回的数据必须是 JSON 格式

符号	含义
$	表示整个数据
@	表示当前数据
.	访问属性
[]	访问数组
*	匹配所有
[,]	访问数组指定索引
[?]	匹配条件
[?(condition)]	匹配条件
[?(@.age>18)]	匹配 age 大于 18 的

• 示例 1：

原始数据：

{
  "name": "张三",
  "age": 18,
  "address": {
    "province": "浙江",
    "city": "杭州"
  }
}

表达式结果如下

$.name
张三

$.age
18

$.address
{
  "province": "浙江",
  "city": "杭州"
}

$.address.province
浙江

• 示例 2：

 原始数据
{
  data: [
    {
      "name": "张三",
      "age": 18,
      "address": {
        "province": "浙江",
        "city": "杭州"
      }
    },
    {
      "name": "李四",
      "age": 20,
      "address": {
        "province": "上海",
        "city": "上海"
      }
    }
  ],
  success: true,
  message: "success"
}

表达式结果如下

$.data[*]

[
  {
    "name": "张三",
    "age": 18,
    "address": {
      "province": "浙江",
      "city": "杭州"
    }
  },
  {
    "name": "李四",
    "age": 20,
    "address": {
      "province": "上海",
      "city": "上海"
    }
  }
]

JavaScript 语法

• 使用 JavaScript 脚本，要求有 return 关键字，_data表示 API 返回的数据

• 示例 1：

原始数据

{
  "data": [
    {
      "name": "张三",
      "age": 18,
      "address": {
        "province": "浙江",
        "city": "杭州"
      }
    },
    {
      "name": "李四",
      "age": 20,
      "address": {
        "province": "上海",
        "city": "上海"
      }
    }
  ],
  "success": true,
  "message": "success"
}

脚本填写

return _data.data.map((item) => {
  return {
    name: item.name,
    age: item.age,
    address: item.address.province + "-" + item.address.city,
  };
});

结果

[
  {
    "name": "张三",
    "age": 18,
    "address": "浙江-杭州"
  },
  {
    "name": "李四",
    "age": 20,
    "address": "上海-上海"
  }
]