Question

我设法制作了一些流程图，现在我遇到了一些问题。这是我的代码：

          <body>
            <canvas width="800" height="800" id="myCanvas"></canvas>
          </body>

     //sample data object

          var vertical = {
                        a: "${sumC}",
                        b: "${sumG}",
                        c: "${sumP}",
                        d :"${sumCa}"

          };


          var data = Object.keys(vertical);

var maxVal = new Array;
for(var x in vertical) {
    maxVal.push(vertical[x]*1);
}

var temp = Math.ceil((Math.max.apply(null,maxVal))/((data.length)-1));
var step =Math.ceil(temp / 10) * 10
console.log(step);

          total = 0;
          var c = document.getElementById("myCanvas");
          var ctx = c.getContext("2d");
          ctx.fillStyle = "blue";
          for (var i = 0; i < data.length; i++) {

            total = total + vertical[data[i]];

          }

          color = ['red', 'blue', 'green','black'];
          start = 0;

          for (var i = 0; i < data.length; i++) {

                    ctx.fillRect((i * 60) + 50, 300, 10,( -(vertical[data[i]])*100)/total);
                    ctx.font = "9px Arial";
                    ctx.fillText(data[i], (i * 60) + 51, 322);
                    ctx.fillText((step * i), 30, ((300+((step/total)*-i*100))));

                    ctx.beginPath();
                    ctx.moveTo(600, 150);
                    ctx.arc(600, 150, 150, start, start +
                      (Math.PI * 2 * (vertical[data[i]] / total)), false);
                    ctx.lineTo(600, 150);
                    ctx.fillStyle = color[i];
                    ctx.fill();
                    start += Math.PI * 2 * (vertical[data[i]] / total);
                  }

现在我希望我的最高比例数字是我的最高数字.Eg：对于上面的代码：我希望最高值为1084，实际上现在是1110.I不想成为1110我想成为1084。有谁可以帮助我？

Answer 1

  ctx.fillRect((i * 60) + 50, 300, 10,( -(vertical[data[i]])*100)/total);
                                              ctx.font = "9px Arial";
                                              ctx.fillText(data[i], (i * 60) + 51, 322);
                                      if((max -(step* ((data.length-1)-i))<0)){
                                     ctx.fillText(0, 30, ((300+((step/total)*-i*100))));    
                                         }else{
                                              ctx.fillText((max -(step* ((data.length-1)-i))), 30, ((300+((step/total)*-i*100))));
                                         }

codepen网址供参考 - http://codepen.io/nagasai/pen/Wxrpaa

制作流程图

1 个答案: