我們的項目中有關於數據倉庫和挖掘，用戶要求UI的界面需要儀表盤，我網上找了下，沒有發現免費的HTML儀表盤，餅圖啥圖表的確很多，那就沒有辦法了，我和同事自己做了一個儀表盤，結果如下。
之後我們就來討論下這個簡單的儀表盤是怎麼做的。我們先大致有一個想法，設定一個寬高2:1的canvas，儀表盤的半徑就是canvas的高度，儀表盤需要的數據有上面分幾個區域（一般是低中高三個區域，為了測試我們准備了四個區域），刻度線和文字，指針，和指針指向的值。
首先第一步自然是canvas的聲明
- <body>
- <div>
- <canvas id="board" width="800" height="600">
- </canvas>
- </div>
- </body>
- </html>
之後的工作都在javascript中完成，我們需要定義一些對象
- //儀表盤面板
- var panel = function(id, option) {
- this.canvas = document.getElementById(id); //獲取canvas元素
- this.cvs = this.canvas.getContext("2d"); //得到繪制上下文
- this.width = this.canvas.width; //對象寬度
- this.height = this.canvas.height; //對象高度
- this.level = option.level;
- this.outsideStyle = option.outsideStyle;
- }
這個panel就是我們的儀表盤對象，參數的id是canvas元素，option是我們需要提交給儀表盤的一些參數值。這個option的定義如下：option對象可以擴展，你可以通過optin定制更加自由強大的儀表盤對象的。
- var panelOption = {
- maxLength: 30,
- interval: 5,
- level: [//儀表盤需要呈現的數據隔離區域
- {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)" }
- };
在繪制元素的時候，我們常常需要保存和恢復現場，特別當我們使用轉移，旋轉等方法的時候，一定要記得先save最後restore。為了方便，我們編寫了一個save函數提供這個方式，這個模式類似C#中的委托，和設計模式中的觀察著模式
- panel.prototype.save = function(fn) {
- this.cvs.save();
- fn();
- this.cvs.restore();
- }
上面這個save可以方便的幫助我們保存和回復現場。
我們定義個用於畫半圓的方法，這個方法中，我們將需要畫半圓時做的translate放到save函數中，這樣畫半圓的變形操作不會對其他操作有影響。
- panel.prototype.drawArc = function() {
- var p = this;
- var cvs = this.cvs;
- p.save(function() {
- cvs.translate(p.width / 2, p.height); //將坐標點移到矩形的底部的中間
- cvs.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); //畫半圓
- cvs.stroke();
- });
- }
然後我們繪制中間顏色的填充區域
- 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();
- });
- });
- }
- }
