该library的github地址：http://bernii.github.io/gauge.js/
创建一个新的BSP application:
html source code如下:
<%@page language="abap"%> <%@extension name="htmlb" prefix="htmlb"%> <html> <head> <script type="text/javascript" src="gauge.min.js"> </script> <script type="text/javascript"> function start() { var opts = { lines: 12, // The number of lines to draw angle: 0.21, // The length of each line lineWidth: 0.44, // The line thickness pointer: { length: 0.9, // The radius of the inner circle strokeWidth: 0.108 // The rotation offset }, colorStart: '#909090', // Colors colorStop: '#8FC0DA', // just experiment with them strokeColor: '#E0E0E0' // to see which ones work best for you }; var target = document.getElementById("myCanvas"); // your canvas element var gauge = new Gauge(target).setOptions(opts); // create sexy gauge! gauge.maxValue = 3000; // set max gauge value gauge.animationSpeed = 400; // set animation speed (32 is default value) gauge.set(2900); // set actual value } </script> </head> <body onload = start()> <div id="hello"><canvas id="myCanvas" width="200" height="100"></canvas></div> </body> </html>
