Question

我有一个网站调用一个函数，该函数随机选取一个数字到2位小数，例如

（5.53）

以下是代码：

randomnum = Math.floor(Math.random() * (1000 - 100) + 100) / 100;

（这给我一个1到10到2位小数的值）

然后网站以0.01为增量计数到这个数字，当它达到它停止的值时，然后循环创建另一个随机数并再次开始计数。

if (randomnum < c) {
    c = 0;
    stopCount() }

（c是计数器值，每20ms递增0.01）

我试图创建一个显示增量和更新的折线图，这个图像仅用于视觉辅助，我没有工作版本。

以下代码是我目前用于获得一般形状的代码，我最初没有创建此代码。这是一个链接到我正在使用的源。 http://www.chartjs.org/docs/latest/charts/line.html

function renderchart() {
var ctx = document.getElementById("bettingarea").getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
    labels: [ "1", "2", "3", "4",],
    datasets: [{
        label: 'Crash Graph',
        data: [5.44, 5.67, 5.94, 6.12,],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:false
            }
        }]
    }
}
});
}

同一个网站有http://www.chartjs.org/docs/latest/developers/updates.html

无论我做什么，我都无法开始工作:(

我想我要问的是，是否有更简单的方法可以做到这一点，如果没有，请帮助你帮助让这个更新数据集功能正常工作

感谢您提供的任何帮助：）

更新：自定义伪代码（我想它就像这样工作）

GENERATE RANDOM = randomnum
START TIMER
UPDATE canvasgraph TO x.seconds AND y.timer
TIMER = TIMER + 0.01 
IF TIMER > randomnum
THEN STOP.timer
END LOOP
ELSE 
CONTINUE TIMER
START LOOP AGAIN

这是一个非常基本的代码形式，只对那些试图可视化代码的人起到视觉帮助的作用，我也知道我没有使用正确的伪代码术语

Answer 1

如果我理解正确，那么你就是这样：

var myLineChart, c = 0, label = 0, randomnum, interval;

function renderchart() {
   var ctx = document.getElementById("bettingarea").getContext('2d');
   myLineChart = new Chart(ctx, {
      type: 'line',
      data: {
         labels: ["1", "2", "3", "4"],
         datasets: [{
            label: 'Crash Graph',
            data: [5.44, 5.67, 5.94, 6.12],
            backgroundColor: [
               'rgba(255, 99, 132, 0.2)',
               'rgba(54, 162, 235, 0.2)',
               'rgba(255, 206, 86, 0.2)',
               'rgba(75, 192, 192, 0.2)',
               'rgba(153, 102, 255, 0.2)',
               'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
               'rgba(255,99,132,1)',
               'rgba(54, 162, 235, 1)',
               'rgba(255, 206, 86, 1)',
               'rgba(75, 192, 192, 1)',
               'rgba(153, 102, 255, 1)',
               'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
         }]
      },
      options: {
         scales: {
            yAxes: [{
               ticks: {
                  beginAtZero: false
               }
            }]
         }
      }
   });
}

function updateChart(chart) {
   randomnum = Math.floor(Math.random() * (1000 - 100) + 100) / 100;
   chart.data.labels = [];
   chart.data.datasets[0].data = [];
   interval = setInterval(function() {
      if (c < randomnum) {
         c += 0.01;
         label++;
         //update chart
         chart.data.labels.push(label.toString());
         chart.data.datasets[0].data.push(+c.toFixed(2));
         chart.update();
      } else {
         clearInterval(interval);
         c = 0;
         label = 0;
         //updateChart(myLineChart) /* maybe call this function again */
      }
   }, 20);
}

window.onload = renderchart;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="bettingarea"></canvas><br>
<button onclick="updateChart(myLineChart)">Update Chart</button>

如果我错了，请纠正我：）

使用HTML和Javascript创建和更新图表

1 个答案: