There are data warehouses and Data Mining in our project. You need a dashboard for the UI interface. I found the free HTML dashboard on the Internet. there are indeed many pie charts, there is no way. My colleagues and I made a dashboard and the result is as follows.
Then we will discuss how this simple dashboard works. First, we have an idea: Set a canvas with a width and a height of 2 to 2. The radius of the dashboard is the height of the canvas, the data required by the dashboard is divided into several areas (generally the lower, middle, and third regions, we have prepared four areas for testing), the dial line and text, pointer, and pointer pointing value.
First, the first step is the canvas declaration.
<body> <div> <canvas id="board" width="800" height="600"> </canvas> </div></body>The subsequent work is completed in Javascript. We need to define some objects.
// Dashboard panel var Panel = function (ID, option) {This. canvas = document. getelementbyid (ID); // get the Canvas Element this. CVS = This. canvas. getcontext ("2D"); // obtain the rendering context. This. width = This. canvas. width; // object width this. height = This. canvas. height; // object height this. level = option. level; this. outsidestyle = option. outsidestyle ;}This panel is our dashboard object. The parameter ID is the canvas element, and option is some parameter values that we need to submit to the dashboard. This option is defined as follows: Option objects can be expanded, and you can use optin to customize more flexible and powerful dashboard objects.
VaR paneloption = {maxlength: 30, interval: 5, level: [// data isolation area to be presented on the dashboard {start: 0, color: "red"}, {start: 30, color: "yellow" },{ start: 40, color: "blue" },{ start: 100, color: "Lime"}], outsidestyle: {linewidth: 4, color: "rgba (100,100,100, 1 )"}};When drawing elements, we often need to save and restore the scene. Especially when we use transfer, rotation, and other methods, remember to save the last restore first. For convenience, we have compiled a save function to provide this method. This mode is similar to the delegate in C # And the observation mode in the design mode.
panel.prototype.save = function(fn) { this.cvs.save(); fn(); this.cvs.restore();}The above save can help us save and reply to the site.
We define a method used to draw a semi-circle. In this method, we put the translate that needs to be made when the semi-circle is drawn into the Save function, so that the deformation operation of the semi-circle will not affect other operations.
Panel. prototype. drawarc = function () {var P = This; var CVS = This. CVS; p. save (function () {CVs. translate (P. width/2, p. height); // move the coordinate point to the center CVs at the bottom of the rectangle. beginpath (); CVs. linewidth = P. outsidestyle. linewidth; CVs. strokestyle = P. outsidestyle. color; CVs. ARC (0, 0, P. height-CVS. linewidth, 0, math. PI/180*180, true); // draw a semi-circular CVs. stroke ();});}Then we plot the Filled Area of the intermediate color.
panel.prototype.drawLevelArea = function(level) { var p = this; var cvs = this.cvs; for (var i = 0; i < level.length; i++) { p.save(function() { cvs.translate(p.width / 2, p.height); cvs.rotate(Math.PI / 180 * level[i].start); p.save(function() { cvs.beginPath(); cvs.arc(0, 0, p.height - p.outsideStyle.lineWidth, Math.PI / 180 * 180, Math.PI / 180 * 360); cvs.fillStyle = level[i].color; cvs.fill(); }); }); }}In the code above, rotate is very important. Every time we rotate according to the value in level, and then draw the color of 180 °. This process is
The first rotation is 0, not dynamic, and the half circle of 180 ° is painted in red.
For the second 30 ° rotation, you can think about the current canvas being skewed, and then draw 180 ° yellow with a oblique color. This is exactly the case that the colors of red over 30 ° are covered.
Similarly, we do not need to change the starting and ending values of the arc. We just need to rotate it before painting. Of course, you need to put it in save.
The principle is the same, and the code is as follows:
panel.prototype.drawLine = function() { var p = this; var cvs = this.cvs; for (var i = 0; i <= 180; i++) { p.save(function() { cvs.translate(p.width / 2, p.height); cvs.rotate(Math.PI / 180 * i); p.save(function() { cvs.beginPath(); cvs.lineTo(-(p.height - p.outsideStyle.lineWidth) + 10, 0); cvs.lineTo(-(p.height - p.outsideStyle.lineWidth) + 5, 0); cvs.stroke(); if (i % 10 == 0) { p.drawText(i); } }); }); }}However, I have not optimized the code for the text below. You can rotate it by yourself.
panel.prototype.drawText = function(val) { var p = this; var cvs = this.cvs; p.save(function() { cvs.lineWidth = 1; cvs.strokeText(val, -(p.height - p.outsideStyle.lineWidth) + 5, 0); });}Finally, draw a pointer. The angle value of the pointer is calculated based on the value given.
panel.prototype.drawSpanner = function(value) { var p = this; var cvs = this.cvs; p.save(function() { cvs.translate(p.width / 2, p.height); cvs.moveTo(0, 0); cvs.arc(0, 0, p.height / 30, 0, (Math.PI / 180) * 360); cvs.lineWidth = 3; cvs.stroke(); }); p.save(function() { cvs.translate(p.width / 2, p.height); cvs.rotate(Math.PI / 180 * -90); p.save(function() { cvs.rotate(Math.PI / 180 * value); cvs.beginPath(); cvs.moveTo(5, -3); cvs.lineTo(0, -p.height * 0.7); cvs.lineTo(-5, -3); cvs.lineTo(5, -3); cvs.fill(); }); });}Now the main methods are completed, and we implement the user interface
panel.prototype.init = function(value) { var p = this; var cvs = this.cvs; cvs.clearRect(0, 0, this.width, this.height); p.drawArc(); p.drawLevelArea(p.level); p.drawLine(); p.drawSpanner(value);}At this point, the Panel objects are all compiled. The following describes how to call
Window. onload = function () {var paneloption = {maxlength: 30, interval: 5, level: [// data isolation area to be presented on the dashboard {start: 0, color: "Red" },{ start: 30, color: "yellow" },{ start: 40, color: "blue" },{ start: 100, color: "Lime"}], outsidestyle: {linewidth: 4, color: "rgba (100,100,100, 1)" }}; Panel = new Panel ("board", paneloption); panel. init (15 );}You can test this simple dashboard.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
