如何制作 'csgocrash' 样式图表

Question

我想制作一个类似下图的图表，即画一条线到一个随时间增加的点。底部的数字是秒数（通过了多少）。有没有可以做到这一点的js库？我试过 chart.js 但我无法实现我想要的。

这是我用 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>

结果……并不令人印象深刻：

Answer 1

这是我写的一些代码，有一些空闲时间，这似乎是一个很好的编程挑战。无法完全正确，您将不得不改进它并使用这些值，但这是基本思想：

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

如何制作 'csgocrash' 样式图表

how do I make a 'csgocrash' style chart

javascript

plotly