Wie mache ich ein 'csgocrash' Style-Diagramm

Ich möchte ein ähnliches Diagramm wie auf dem Bild unten machen, das eine Linie zu einem Punkt zeichnet, der im Laufe der Zeit zunimmt. Zahlen auf der Unterseite sind Sekunden (wie viele bestanden). Gibt es eine js-Bibliothek, die das tun würde? Ich habe es mit chart.js versucht, aber ich konnte nicht erreichen, was ich wollte.Wie mache ich ein 'csgocrash' Style-Diagramm

hier ist, was ich mit plotly.js versucht

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
</head> 
<body> 
    <div style="width:400px;height:400px" id="myDiv"></div> 
    <script> 
     var numberX = 1; 
     var numberY = 1; 

     var data = [ 
     { 
      x: [1, numberX], 
      y: [2, numberY], 
      type: 'scatter' 
     } 
     ]; 

     Plotly.newPlot('myDiv', data); 

     setInterval(function(){ 
      numberX++; 
      numberY++; 

      var data = [ 
      { 
       x: [1, numberX], 
       y: [2, numberY], 
       type: 'scatter' 
      } 
      ]; 

      Plotly.newPlot('myDiv', data); 
     }, 1000); 
    </script> 

</body> 
</html>

Ergebnisse sind ... nicht beeindruckend:

Quelle

2017-01-24 inteNsE-

Fragen fragen uns, für Bibliotheken für SO off-topic sind. Wenn Sie Ihre Frage mit dem Code, den Sie ausprobiert haben, erneut schreiben, können wir versuchen, Ihnen dabei zu helfen, das Problem zu beheben. – Amy

Ich habe meinen Code, den ich bisher versucht, tut mir leid für das –

heren einig Code, den ich schrieb, hatte einige freie Zeit und das schien eine nette Programmieraufgabe zu sein. Couldnt es genau richtig, Sie sind gonna haben, um es zu verbessern und mit den Werten zu spielen, aber das ist die Grundidee:

var mult = 0; 
var ruler; 
var inc; 
var time=0; 
var multt = 0.01; 
var done = false; 
var randomFac ; 

function setup() { 
    createCanvas(500, 300); 
    frameRate(15); 
    ruler = new Ruler(); 
    inc = new Line(); 
    setInterval(myTimer, 50); 
} 

function draw() { 
    background(30); 

    stroke(150); 
    strokeWeight(1); 
    line(20, 20, 20, height - 20); 
    line(20, height - 20, width - 20, height - 20); 

    noStroke(); 
    fill(150); 
    textSize(120); 
    textAlign(CENTER); 
    text(mult.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0] + "x", width/2, height/2 + 20); 

    if (mult > randomFac){ 
    console.log("stop"); 
    done = true; 
    } 

    if (!done){ 
    mult += multt;} 

    if (!done){ 
    ruler.show(); 
    inc.show(); 
    } 
} 

function Ruler() { 
    this.spc = 150; 
    this.b = ((height - 20)/this.spc)/2; 

    this.show = function() { 
    for (var a = 0; a < (width - 20)/this.spc; a++) { 
     textAlign(CENTER); 
     textSize(10); 
     noStroke(); 
     fill(150); 
     text(a, a * this.spc + 20, height - 8); 
    } 
    for (var a = 0; a < (height - 20)/this.spc; a++) { 
     textAlign(CENTER); 
     textSize(8); 
     noStroke(); 
     fill(150); 
     text(this.b.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0] + "x", 10, a * this.spc + 10); 
     this.b -= 0.5; 
    } 
    this.b = ((height - 20)/this.spc)/2; 
    } 
} 

function Line() { 

    this.show = function() { 
    stroke(155); 
    strokeWeight(2); 
    beginShape(); 
    vertex(21, height - 20); 
    if (height - 20 - (mult * (ruler.spc * 2)) + 20 < 280) { 
     vertex(0 + 20 + (time * (ruler.spc)) - 20, height - 20 - (mult * (ruler.spc * 2)) + 20); 
    } 
    endShape(); 

    if (0 + 20 + (time * (ruler.spc)) - 20 >= 480 || height - 20 - (mult * (ruler.spc * 2)) + 20 <= 20){ 
     ruler.spc -= 1; 
    } 
    } 
} 

function myTimer() { 
    time += 0.05; 
    multt += 0.00005; 
}

Ich hoffe, das Sie in irgendeiner Weise hilft, haben einen schönen Tag.

Sie können den Code sehen, hier zu arbeiten: https://codepen.io/felipe_mare/pen/PWKZWQ

Quelle

2017-01-24 21:14:44 Pepe

Das ist gute Lösung +1, aber ich möchte Kurve anstelle von geraden Linie anzeigen, Haben Sie eine Ahnung davon? B'Coz es zieht ständig Linie und ich will das nicht. –

@coDemurDerer es könnte einen besseren Weg geben, aber kann jeden Punkt in einem Array speichern und verwenden Sie die 'beginShape()' Funktion, um es anzuzeigen – Pepe

Wie mache ich ein 'csgocrash' Style-Diagramm

Antwort

Verwandte Themen