Aprende en Comunidad
Avalados por :
Utilización de Pie Charts y Donut Charts en SAPUI5 para mostrar proporciones de datos
- Creado 01/03/2024
- Modificado 01/03/2024
- 15 Vistas
0
Cargando...
Pie charts are extensively used in presentations and offices, Pie Charts help show proportions between categories, by dividing a circle into proportional segments. Each arc length represents a proportion of each category, while the full circle represents the total sum of all the data, equal to 100%.
A donut chart is essentially a Pie Chart with an area of the center cut out.
Data.Json:
JSON is a very lightweight format for storing data and can be directly used as a data source for SAPUI5 applications. Now create a JSON file within the model folder of the application.
Specify the data in the JSON file as below:
To access the above JSON file throughout the application, specify the JSON file URI in the model under sap.ui5 section in the manifest.json file. we specify the type as JSON and URI which is the path to the JSON data to instantiate the JSON Model as shown below.
View:
In our example I have taken Department as the Dimension,
Employee Count as measures.
A donut chart is essentially a Pie Chart with an area of the center cut out.
Data.Json:
JSON is a very lightweight format for storing data and can be directly used as a data source for SAPUI5 applications. Now create a JSON file within the model folder of the application.
Specify the data in the JSON file as below:
{
"items": [{
"Department": "R & D",
"EmployeeCount": "20"
}, {
"Department": "Syngenta",
"EmployeeCount": "30"
}, {
"Department": "Volvo",
"EmployeeCount": "35"
}, {
"Department": "NIKE",
"EmployeeCount": "60"
}, {
"Department": "ADIDAS",
"EmployeeCount": "70"
}]
}
To access the above JSON file throughout the application, specify the JSON file URI in the model under sap.ui5 section in the manifest.json file. we specify the type as JSON and URI which is the path to the JSON data to instantiate the JSON Model as shown below.
"sap.ui5": {
…………………………….
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "Donut_Chart.i18n.i18n"
}
},
"Data": {
"Data": {
"type": "sap.ui.model.json.JSONModel",
"uri": "model/Data.json"
}
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
}
}
View:
In the view define a Vizframe chart of type donut by using the below namespaces
xmlns:viz="sap.viz.ui5.controls"
xmlns:vizFeeds="sap.viz.ui5.controls.common.feeds"
xmlns:vizData="sap.viz.ui5.data".
In our example I have taken Department as the Dimension,
Employee Count as measures.
<viz:VizFrame xmlns="sap.viz" id="idDonutChart" vizType="donut" width="100%" height="100%"
vizProperties="{plotArea: { drawingEffect: 'glossy' },title:{ text:'Donut Chart Example'}}">
<viz:dataset>
<vizData:FlattenedDataset data=
Pedro Pascal
Se unió el 07/03/2018
Facebook
Twitter
Pinterest
Telegram
Linkedin
Whatsapp
Sin respuestas
No hay respuestas para mostrar
Se el primero en responder
contacto@primeinstitute.com
(+51) 1641 9379
(+57) 1489 6964
© 2024 Copyright. Todos los derechos reservados.
Desarrollado por Prime Institute
Hola ¿Puedo ayudarte?