Question

我最近偶然发现了以下图表（来自bustabit.com）； GIF (Gyazo)

我一直在尝试使用GraphJS重新创建相同的东西，但要点是该图没有像所提供的video / gif中那样缩小（或自动向上滚动）。关于如何解决此问题的任何想法吗？我已经使图表每100毫秒更新一次，并增加了一个新点，还有没有办法使图表更平滑？

var options = {
  type: 'line',
  data: {
    labels: [2, 4, 6, 8],
    datasets: [
        {
          data: [],
        borderWidth: 1
        }
        ]
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
        yAxes: [{
        ticks: {
            beginAtZero: true,
                    reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartAnimation').getContext('2d');
var chart = new Chart(ctx, options);

var gameStarted = new Date().getTime(); 
setInterval(function(){
    var elapsed = new Date().getTime() - gameStarted,
        currentMultiplier = (growthFunc(elapsed) / 100).toFixed(2);

    console.log(currentMultiplier + 'x');    

    chart.data.datasets[0].data.push(currentMultiplier);
  chart.update();
}, 100);

function growthFunc(ms) {
    var r = 0.00006;
    return Math.floor(100 * Math.pow(Math.E, r * ms));
}

function inverseGrowth(result) {
    var c = 1 / 0.0006;
    return c * Math.log(0.01 * result);
}

ChartJS自动缩放/滚动

0 个答案: