Я хотел бы добавить диаграмму для визуального представления статистики.Я нашел пример в Интернете, но я не уверен, как изменить это, чтобы удовлетворить мои требования.
Ниже приведен код, который я нашел, и он показывает количество голосов за фрукт.
У меня есть список задач, который мы в основном используем для регистрации всех поступающих работ. Мне бы хотелось, чтобы на диаграмме был показан статус задачи по оси y и число в этом состоянии по оси x.Различные параметры состояния: Выполняется, В ожидании, В ожидании, Закрыто и Завершено.Код ниже включает в себя трендовые значки статистики, которые мне не нужны в моем графике.Я буду ссылаться ниже, где я нашел код и сам код.
https://medium.com/@anoopt/animations-in-view-format-ce9cd560bfb3
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": "true",
"hideColumnHeader": "true",
"rowFormatter": {
"elmType": "div",
"style": {
"align-items": "flex-end",
"width": "800px",
"box-sizing": "border-box",
"border-left": "3px solid"
},
"attributes": {
"class": "ms-fontColor-themeDark"
},
"children": [
{
"elmType": "span",
"txtContent": "Fruits",
"style": {
"display": "=if([$IsLastItem], 'block','none')",
"position": "absolute",
"left": "-21px",
"top": "=@rowIndex*70 -130 + 'px'",
"width": "12px",
"text-align": "center",
"font-size": "24px",
"line-height": "22px"
}
},
{
"elmType": "span",
"style": {
"display": "=if([$IsLastItem], 'block','none')",
"position": "absolute",
"left": "-27px",
"top": "=@rowIndex*70 + 'px'",
"width": "10px",
"font-size": "24px"
},
"attributes": {
"iconName": "ChevronUp"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"top": "=@rowIndex*65 + 'px'",
"left": "=(700 / 1000) * (800 - 45) + 'px'",
"border-left": "3px dashed",
"width": "2px",
"height": "65px"
},
"attributes": {
"class": "animated zoomIn"
}
},
{
"elmType": "span",
"style": {
"display": "=if([$IsLastItem], 'block','none')",
"position": "absolute",
"left": "4px",
"top": "=@rowIndex*70+48 + 'px'",
"font-size": "24px"
},
"attributes": {
"iconName": "ChevronRight"
}
},
{
"elmType": "span",
"txtContent": "Votes",
"style": {
"display": "=if([$IsLastItem], 'block','none')",
"position": "absolute",
"left": "28px",
"top": "=@rowIndex*70+48 + 'px'",
"font-size": "24px",
"line-height": "24px"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"display": "=if([$IsLastItem], 'block','none')",
"left": "px",
"top": "=@rowIndex*70+42 + 'px'",
"border-bottom": "3px solid",
"width": "800px",
"height": "2px"
}
},
{
"elmType": "div",
"attributes": {
"class": "=if([$Votes] >= 700, 'ms-bgColor-themeDarker ms-fontColor-white ms-bgColor-themePrimary--hover ms-fontColor-white--hover ms-font-m animated bounceInLeft delay-1s', 'ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover ms-font-m animated bounceInLeft delay-1s')",
"title": "=[$Title] + ' has ' + [$Votes] + ' Votes' + if([$Votes] >= 700, ' and is trending.','.')"
},
"style": {
"height": "56px",
"width": "=if([$Votes] >= 1000, (800 - 45) + 'px', ([$Votes] / 1000) * (800 - 45) + 'px')",
"margin": "5px 0px",
"box-shadow": "2px 0px 4px 0px darkgrey",
"box-sizing": "border-box",
"padding": "15px 10px",
"border-right": "2px solid",
"z-index": "1"
},
"children": [
{
"elmType": "div",
"style": {
"margin-top": "-12px",
"margin-bottom": "10px",
"display": "=if([$IsHighest], 'block','none')",
"color": "#FFD700",
"font-size": "42px",
"float": "right"
},
"attributes": {
"iconName": "CrownSolid"
}
},
{
"elmType": "div",
"style": {
"display": "=if([$Votes] >= 700, 'block','none')",
"float": "right",
"margin-left": "5px",
"margin-right": "5px"
},
"attributes": {
"iconName": "Trending12"
}
},
{
"elmType": "span",
"txtContent": "=if([$Votes] > 1000, '1000+', [$Votes])",
"style": {
"display": "block",
"float": "right"
}
},
{
"elmType": "span",
"txtContent": "[$Title]",
"style": {
"display": "block",
"float": "left"
}
},
{
"elmType": "img",
"attributes":{
"src":"[$Icon]"
},
"style": {
"display": "block",
"float": "left",
"width": "20px",
"margin-left": "5px"
}
}
]
}
]
}
}