Как я могу вставить строковые данные в диаграммы в chart.js

Question

Я хочу в реальном времени визуализировать полученные данные из socket.io на charts.js.Мои полученные данные - String, имеют 18 значений и выглядят как: [1,2,3,4,5,6,7,8, ..., 18] и имеют Xaxis-подобный: A, B, C, D, Eи когда я нажимаю эти данные, они не отображаются на диаграммах

Моя функция приема

            socket.on('temp', function(data) { 
                console.log(data.temp);
                document.getElementById('date').innerHTML = data.date; 
                chart.data.datasets.forEach((dataset) => {
                        dataset.data.push(data.temp); 
                    });
                chart.update();
            });

Код моей диаграммы

  var chart = new Chart(ctx, {
                // The type of chart we want to create
                type: 'line',

                // The data for our dataset
                data: {
                labels: ["A","B","C","D","E","F","G","H","J","K","L", "M", "N","O","P","R"],
                datasets: [{
                    label: "Swiatlo",
                    borderColor: "#FF5733",
                    data: [],
                    fill: false,
                    pointStyle: 'circle',
                    backgroundColor: '#3498DB',
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    lineTension: 0,
                }]
                },

                // Configuration options go here
                options: {}

            });

Так как я могу визуализировать их таким образом?Первое значение = A, второе = B ...

Answer 1

Код, который вы показываете нам, кажется правильным, единственное, что вам нужно, это сдвинуть данные в наборе данных перед добавлением нового значения, например:

socket.on('temp', function(data) { 
    console.log(data.temp);
    document.getElementById('date').innerHTML = data.date; 
    chart.data.datasets.forEach((dataset) => {
        dataset.data.shift();
        dataset.data.push(data.temp); 
    });
    chart.update();
});