'csgocrash'스타일 차트를 작성하는 방법

아래 그림과 비슷한 차트를 만들고 싶습니다.이 차트는 시간이 지남에 따라 증가하는 점에 선을 그립니다. 하단의 숫자는 초 (통과 한 수)입니다. 그 일을 할 수있는 js 라이브러리가 있습니까? 나는 chart.js으로 시도했지만 내가 원하는 것을 성취 할 수 없었습니다. 여기 'csgocrash'스타일 차트를 작성하는 방법

이

<!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>

결과는 ... 감동없는 내가 plotly.js로 시도 무엇 : 내가 쓴

출처

2017-01-24 inteNsE-

질문이 우리를 묻는 :

당신은 코드가 여기서 일하는 볼 수 있습니다. 시도한 코드로 질문을 다시 작성하면 문제를 해결하는 데 도움이 될 수 있습니다. – Amy

나는 내 코드를 추가했다. 지금까지 시도해 보니, 미안하다. –

을 heres 일부 코드, 약간의 자유 시간이 있었다 그리고 이것은 좋은 프로그래밍 도전처럼 보였다. couldnt는 당신이 될거야, 정확히 제대로하면을 개선하고 값으로 플레이해야하지만, 이것은 기본적인 생각이다 : 나는이 어떤 식 으로든 당신을 도움이되기를 바랍니다 좋은 하루 되세요

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

. 라이브러리는 SO 오프 주제이기 때문 https://codepen.io/felipe_mare/pen/PWKZWQ

출처

2017-01-24 21:14:44 Pepe

그건 좋은 해결책이다. 그러나 나는 직선 대신 커브를 표시하고 싶다. B'Coz는 계속 선을 그으므로 나는 그것을 원하지 않는다. –

@coDemurDerer 더 좋은 방법이있을 수 있지만 배열의 모든 점을 저장하고'beginShape()'함수를 사용하여 표시 할 수 있습니다 – Pepe

'csgocrash'스타일 차트를 작성하는 방법

답변

관련 문제