使用欄位格式化來自定義SharePoint（五）

部落格地址：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]"
        }
    ]
}