このブログ「MoreBeerMorePower」らしい SharePoint リストの Column formattingサンプルができました！やったー
最小値 0, 最大値 1 に指定した数値列のフォーマットです。1の場合に満タンのビール、0では空のビールジョッキになります。
以下がJSONです。もう少しきれいにできそうですが。
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "margin-bottom": "30px", "width": "120px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "position": "relative", "margin-left": "10px", "margin-top": "10px", "align-items": "center", "left": "30px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "width": "80px", "height": "120px", "z-index": "1", "position": "relative", "right": "40px" }, "children": [ { "elmType": "div", "style": { "height": "=(120 *(1- @currentField) + 'px' )", "width": "100%", "background-color": "transparent" } }, { "elmType": "div", "style": { "height": "=(20 *( @currentField) + 'px' )", "width": "100%", "background-color": "#FFF", "border-top": "1px solid #EEE" } }, { "elmType": "div", "style": { "height": "=(100 * (@currentField) + 'px')", "width": "100%", "background-color": "#efd002" } } ] }, { "elmType": "div", "style": { "position": "absolute", "width": "50px", "height": "60px", "right": "0px", "border": "15px solid #999", "border-radius": "15px" } }, { "elmType": "div", "style": { "position": "absolute", "width": "100px", "height": "130px", "right": "30px", "top": "0px", "background-color": "#999", "border-radius": "5px" } }, { "elmType": "div", "style": { "position": "absolute", "width": "80px", "height": "120px", "right": "40px", "top": "0px", "background-color": "#EEE" } }, { "elmType": "div", "style": { "position": "absolute", "width": "15px", "height": "60px", "right": "72px", "top": "30px", "z-index": "99", "background-color": "rgba(0,0,0,0.2)" } }, { "elmType": "div", "style": { "position": "absolute", "width": "15px", "height": "60px", "right": "97px", "top": "30px", "z-index": "99", "background-color": "rgba(0,0,0,0.2)" } }, { "elmType": "div", "style": { "position": "absolute", "width": "15px", "height": "60px", "right": "47px", "top": "30px", "z-index": "99", "background-color": "rgba(0,0,0,0.2)" } } ] }, { "elmType": "div", "txtContent": "=if(@currentField.displayValue=='', '0%' , (100*(@currentField)+'%'))", "style": { "position": "absolute", "top": "140px", "right": "80px", "margin": "2px", "font-size": "14px", "font-weight": "bold" } } ] }
ビールの液体部分は3つのdivを縦並びにして構成しています。以下イメージ図。泡と液体が1:5なので、もう少し泡多くてもいいかもです。
あまり仕事で使うシーンは思い浮かばないです！
