Erstellen von Ablaufdiagrammen

-1

Ich habe es geschafft, einige Ablaufdiagramme zu erstellen, und jetzt habe ich einige Probleme. Hier ist mein Code:Erstellen von Ablaufdiagrammen

  <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); 
        }

Jetzt möchte ich, dass meine Top-Skala Anzahl meine Top number.Eg sein: für obige Code: Ich möchte der Spitzenwert 1084 sein, ist es eigentlich jetzt bei 1110.I don ist Ich will 1110 sein Ich möchte 1084 sein. Kann mir jemand helfen?

Quelle

2016-06-09 Bogdan

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 URL für referenz http://codepen.io/nagasai/pen/Wxrpaa

Quelle

2016-06-09 18:28:41

Diese Logik wird der Maximalwert eingestellt ist Ihr maximales Skalenwert ... und y-Achse Schritte von dort –

nehmen Wenn ich die Werte Auszug aus einem Servlet funktioniert nicht. Wenn ich die Werte a, b, c, d durch berechnete Werte ersetze: a: "$ {sumC}", b: "$ {sumG}", c: "$ {sumP}", d: "$ {sumCa}" funktioniert nicht – Bogdan

es ist mehr von Servlet issue ..different von der Frage gestellt :) –

Erstellen von Ablaufdiagrammen

Antwort

Verwandte Themen