Диаграмма. js удаление первого набора данных и метки - PullRequest
Новая
       121

Диаграмма. js удаление первого набора данных и метки

0 голосов
/ 21 июня 2020

Я создаю веб-сайт валютного кошелька, и на домашней странице я хотел разместить график со значением Bitcoin в долларах США, обновляемым каждую минуту. Я получил диаграмму, значение bitcoin, значения вставляются, но я хочу, чтобы всякий раз, когда в моем графике есть 21 набор данных, я хочу удалить первый и добавить другой в конце. Поэтому каждый раз я хочу иметь 20 наборов данных. Например, когда у меня есть, скажем, 2 набора данных, один со временем 16:40:00 и второй со временем 16:41:00, тогда, когда другой должен go на графике, я хочу удалить это 16:40: 00 и добавьте 16:42:00, чтобы на графике было 2 набора данных: 16:41:00 и 16:42:00. Но я не могу понять, как это делать. Я пробовал несколько раз, но каждый раз, даже когда я удалял первый набор данных, длина массива все равно увеличивалась.

Вот мой код JavaScript (обновление диаграммы происходит в первом интервале, вот где проблема): 

        var index = 1;
        var data = [];
        var labels = [];
        var ctx = document.getElementById('myChart').getContext('2d');
        var curDate;

        function pad(value) {
            if(value < 10) {
                return '0' + value;
            } else {
                return value;
            }
        }

        var req = new XMLHttpRequest();
        req.open('GET', 'https://blockchain.info/ticker', false); 
        req.send(null);
        if(req.status == 200)
            data[0] = JSON.parse(req.responseText).USD.last;
            curDate = new Date();
            labels[0] = pad(curDate.getHours()) + ":" + pad(curDate.getMinutes()) + ":" + pad(curDate.getSeconds());

        setInterval(function() {
            req.open('GET', 'https://blockchain.info/ticker', false); 
            req.send(null);
            if(req.status == 200) {
                if(data.length < 20) {
                    data[index] = JSON.parse(req.responseText).USD.last;
                    curDate = new Date();
                    labels[index] = pad(curDate.getHours()) + ":" + pad(curDate.getMinutes()) + ":" + pad(curDate.getSeconds());
                    index++;
                } else {
                    myChart.data.labels.splice(1);
                    myChart.data.datasets.data.splice(1);
                    data[index] = JSON.parse(req.responseText).USD.last;
                    curDate = new Date();
                    labels[index] = pad(curDate.getHours()) + ":" + pad(curDate.getMinutes()) + ":" + pad(curDate.getSeconds());
                    index++;
                }
                console.log(data);
                console.log(labels);
                myChart.update();
            }
        }, 1000);

        var myChart = new Chart(ctx, {
            "type": "line",
            "data": {
                "labels": labels,
                "datasets": [{
                    "label": "Bitcoin worth in USD",
                    "data": data,
                    "fill": false,
                    "borderColor": "rgb(255, 255, 255)",
                    "lineTension": 0
                }]
            },
            "options": {
                "responsive": true,
                "scales": {
                    "xAxes": [{
                        gridLines: {
                            display: false
                        },
                    }],
                    "yAxes": [{
                        gridLines: {
                            color: "#666666"
                        },
                    }]
                }
            }
        });

1 Ответ

0 голосов
/ 22 июня 2020

Похоже, вы неправильно настраиваете массивы. Вы можете использовать push, чтобы добавить новые значения в конец ваших меток и массивов данных, и shift, чтобы удалить самые старые значения.

Приведенный ниже пример кода обновит график, чтобы показать только 20 самых последние точки. 

var index = 1;
var data = [];
var labels = [];
var ctx = document.getElementById('myChart').getContext('2d');
var curDate;

function pad(value) {
  if (value < 10) {
    return '0' + value;
  } else {
    return value;
  }
}

var req = new XMLHttpRequest();
req.open('GET', 'https://blockchain.info/ticker', false);
req.send(null);
if (req.status == 200)
  data[0] = JSON.parse(req.responseText).USD.last;
curDate = new Date();
labels[0] = pad(curDate.getHours()) + ":" + pad(curDate.getMinutes()) + ":" + pad(curDate.getSeconds());

setInterval(function() {
  req.open('GET', 'https://blockchain.info/ticker', false);
  req.send(null);
  if (req.status == 200) {
    // Add new data and label
    data.push(JSON.parse(req.responseText).USD.last);
    curDate = new Date();
    labels.push(pad(curDate.getHours()) + ":" + pad(curDate.getMinutes()) + ":" + pad(curDate.getSeconds()));
    if (data.length > 20) {
      // Remove the oldest data and label
      data.shift();
      labels.shift();
    }
    myChart.update();
  }
}, 1000);

var myChart = new Chart(ctx, {
  "type": "line",
  "data": {
    "labels": labels,
    "datasets": [{
      "label": "Bitcoin worth in USD",
      "data": data,
      "fill": false,
      "borderColor": "rgb(255, 255, 255)",
      "lineTension": 0
    }]
  },
  "options": {
    "responsive": true,
    "scales": {
      "xAxes": [{
        gridLines: {
          display: false
        },
      }],
      "yAxes": [{
        gridLines: {
          color: "#666666"
        },
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>

<body>
  <canvas id="myChart" width="600" height="400"></canvas>
</body>
...