Barchart formatting in JSON/Column formatting
题
I am working on JSON/column formatting. I want to show column data in barchart format.
(e.g. In below image Progress
is the column name and 100/75/50/25 are four different items.)
I know we can create progress bar. But I do not know if it is possible to show data in bar chart format. If yes, then please suggest me on this.
Thanks in advance.
解决方案
Thankyou for clarifications. I created a simple solution for column formatting. You can improve in CSS part, while I am using old school CSS to render the bar graphs. Below example have four bars, each representing 25% completion.
Use the below link to see code on Github Gist. https://gist.github.com/thinkb4code/0e11bb6c3a00555484260905a0d1198a
There are two files in it.
- bar-graph.html This is the basic HTML I used to render bar graph. For me column formatting start with basic HTML concept. First identify the design and then convert it to JSON schema.
- bar.graph.json This is the actual JSON schema we need to put as column formatting.
Here is the reference video for you, how this looks.
其他提示
If you want to create a horizontal bar inside your number column then try below code:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "span",
"txtContent": "@currentField + '%'",
"style": {
"padding-left": "8px",
"white-space": "nowrap"
}
}
],
"attributes": {
"class": "sp-field-dataBars"
},
"style": {
"padding": "0",
"width": "=if(@currentField >= 100, '100%', @currentField + '%')"
}
}
Reference: Create simple data visualizations.