首页 > SAP > SAPUI5 > Column Chart using VizFrame (sap.viz.ui5.controls.VizFrame) in SAPUI5
2019
08-27

Column Chart using VizFrame (sap.viz.ui5.controls.VizFrame) in SAPUI5

Hello every one, In this blog, we will learn how to display charts like Line, Column, Bar using VizFrame in SAPUI5 applications. Lets get started.In this example we will create a Column Chart using VizFrame(sap.viz.ui5.controls.VizFrame)  in SAPUI5. Viz Frame is available in “sap.viz.ui5.controls” library.

Column Chart using VizFrame (sap.viz.ui5.controls.VizFrame)  in SAPUI5 - 第1张  | 优通SAP

Column Chart using VizFrame(sap.viz.ui5.controls.VizFrame)  in SAPUI5

1.Step-by-Step Procedure

1. Create an SAPUI5 application project in Eclipse IDE with a view and controller.

2. Double click on the view “V_chart.view.xml” to add the VizFrame to create column chart. Copy and paste the below code into the view.

3. Now double click on controller “V_chart.controller.js” to add the java script code necessary to set the data to the column chart and different chart properties. We are going to write the code in onInit( ) method of the controller.

4. Copy and paste the below code in “index.html”.

5. Save the application and execute the “index.html” of the application to see the output.

Column Chart Visualization

Congrats, you have successfully created Column chart in SAPUI5 application using VizFrame.

Please stay tuned to us for more

最后编辑:
作者:yangsen
有需要可在文章留言或者邮件yan252@163.com给我。