我該如何製作'csgocrash'風格的圖表

我想製作一張類似的圖表，就像下面的圖片一樣，這是一條線，隨着時間的推移而增加。底部的數字是秒（通過多少）。有沒有任何js庫可以做到這一點？我試過chart.js，但我無法達到我想要的。我該如何製作'csgocrash'風格的圖表

這裏就是我試圖用plotly.js

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

結果......不是令人印象深刻：

來源

2017-01-24 inteNsE-

問題要求我們提供庫是題外話了SO。如果你用你試過的代碼重寫你的問題，我們可以嘗試幫你實現它。 – Amy

我添加了我的代碼我嘗試過迄今爲止，對不起 –

繼承人一些代碼，我寫了，有一些空閒時間這似乎是一個不錯的編程挑戰。不可能得到它完全正確，你得去改善它，並與價值觀玩，但這樣的基本理念：

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

我希望這有助於你以某種方式，有一個愉快的一天。

你可以看到代碼在這裏工作：https://codepen.io/felipe_mare/pen/PWKZWQ

來源

2017-01-24 21:14:44 Pepe

這是很好的解決方案+1，但我想顯示曲線而不是直線，你有什麼想法嗎？ B'Coz它不斷畫線，我不想那樣。 –

@coDemurDerer可能有更好的方法，但可以將每個點存儲在一個數組中，並使用'beginShape（）'函數來顯示它 – Pepe

我該如何製作'csgocrash'風格的圖表

回答

相關問題