玩一下显示数据页面

<canvas id="circle" width="400" height="400">您的浏览器暂不支持Canvas</canvas>
        <hr>
        <input id="sumNumber" type="hidden" value="100">
        <div style="margin-top:2px;margin-left:2px;">
            <input id="number0" type="hidden" value="20">
            <div id="info0" style="background:#BBBBBB; width:200px; display:inline-block;">
                <span>&nbsp;strong future right : 20</span>
            </div>
            <div id="color0" style="background:#ffF0f0; width:300px; display:inline-block;">
                <span>&nbsp;</span>
            </div>
        </div>
        <div style="margin-top:2px;margin-left:2px;">
            <input id="number1" type="hidden" value="35">
            <div id="info1" style="background:#BBBBBB; width:200px;  display:inline-block;">
                <span>&nbsp;strong future false : 35</span>
            </div>
            <div id="color1" style="background:#ffF0f0; width:300px; display:inline-block;">
                <span>&nbsp;</span>
            </div>
        </div>
        <div style="margin-top:2px;margin-left:2px;">
            <input id="number2" type="hidden" value="45">
            <div id="info2" style="background:#BBBBBB; width:200px; display:inline-block;">
                <span>&nbsp;dubious true : 45</span>
            </div>
            <div id="color2" style="background:#ffF0f0; width:300px; display:inline-block;">
                <span>&nbsp;</span>
            </div>
        </div>    
        
        <script type="text/javascript">    
            var indexToChar = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');        
            function getColor(index, length){
                var all = 16777216/(length+1)*index;
                var result = "#";
                for(var i = 0; i < 6; i++){
                    result = result + indexToChar[Math.floor(all%16)];
                    all = all/16;
                }
                return result;
            }
            function drawCircle(){
                var sumNumber = document.getElementById("sumNumber").value;    
                var canvas = document.getElementById("circle"); 
                var ctx = canvas.getContext("2d");
                var number = 0;
                var beforeNumber = 0;
                var colorNumber = 13;
                for(var i = 0; i < colorNumber; i++){
                    var info = document.getElementById("color"+i);
                    if(info == null)
                        break;
                    
                    // 计算新的结束位置
                    number = document.getElementById("number"+i).value/sumNumber + beforeNumber;
                    
                    // 设置颜色
                    info.style.background = getColor(i,colorNumber); 
                    ctx.fillStyle = getColor(i,colorNumber);  
                    ctx.beginPath();  
                    ctx.moveTo(200,200); 
                    
                    // 画扇区
                    ctx.arc(200,200,200,beforeNumber*Math.PI*2,number*Math.PI*2,false);  
                    ctx.fill(); 
                    
                    // 设置下次的开始位置
                    beforeNumber = number;
                }
            }  
            drawCircle();  
        </script>

具体的效果如下：