javascript - 在 HTML 和 Javascript 中创建和更新图表

Question

我有一个网站，它调用一个函数，该函数随机选择一个小数点后两位的数字，例如

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

如果我错了请纠正我:)