¡Caminando hacia el éxito!

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
  • 13 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:
{
	"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
Pinterest
Telegram
Linkedin
Whatsapp

Sin respuestas

No hay respuestas para mostrar 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! Soy Diana, asesora académica de Prime Institute, indícame en que curso estas interesado, saludos!
Hola ¿Puedo ayudarte?