使用字段格式化来自定义SharePoint（五）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/FoxDave/article/details/82019777

博客地址：http://blog.csdn.net/FoxDave

创建简单的数据视觉效果

使用字段格式化来将条件和算法的操作整合来完成基本的数据视觉效果。
将数字字段格式化为日期条(高级)
下图展示了将数字字段格式化为日期条的效果。

本例应用background-color和border-top样式类来创建当前数字字段@currentField日期条视觉效果。不同的值会通过设置图形条的宽度(width)属性来展示，当值大于95时会设置为100%，否则设置为(@currentField*100/95)%。那么我们如何在我们的数字字段上应用它呢？我们可以将边界条件调整为字段的最大期望值，如20，然后更改计算式去指定基于字段值的图形条应该如何增长。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "attributes": {
    "class": "sp-field-dataBars"
  },
  "style": {
    "width": "=if(@currentField > 95, '100%', toString(@currentField * 100 / 95) + '%'"
  }
}

展示向上/向下趋势图标(高级)
下图展示的是添加了趋势图标的列表：

本例依靠两个数字字段Before和After，用于比较数据。如果After比Before的值大，则使用sp-field-trending–up样式，否则使用sp-field-trending–down样式。

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "attributes": {
                "class": {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": ">",
                            "operands": [ "[$After]", "[$Before]" ] },
                        "sp-field-trending--up",
                        "sp-field-trending--down"
                    ]
                },
                "iconName": {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": ">",
                            "operands": [ "[$After]", "[$Before]" ] },
                        "SortUp",
                        {
                            "operator": "?",
                            "operands": [ { "operator": "<", "operands": [ "[$After]", "[$Before]" ] }, "SortDown", "" ] }
                    ]
                }
            }
        },
        {
            "elmType": "span",
            "txtContent": "[$After]"
        }
    ]
}