График JS равномерно распределяет баллы - PullRequest
Новая
       6

График JS равномерно распределяет баллы

0 голосов
/ 28 марта 2020

Я хочу распределить все точки моей линии равномерно. По умолчанию все выглядит хорошо:

enter image description here

Если я добавлю данные с помощью этой функции, я получу такой результат: 

var myLineChart = new Chart(ctx, config);

function addData(a) {
    config.data.labels.push(a);
    config.data.datasets.forEach(function(dataset) {
        dataset.data.push(a);
    });
    if (config.data.datasets[0].data.length > 10) {
         config.data.datasets[0].data.shift();
    }
    myLineChart.update();
}

enter image description here

И если я добавлю больше элементов, он станет нечитаемым. Я уже несколько дней пытался это исправить, так что помощь была бы отличной :). Вы можете просмотреть и увидеть конфигурацию и весь код здесь: https://pastebin.com/wrTak2Rx

1 Ответ

1 голос
/ 29 марта 2020

Проблема в вашей функции addData состоит в том, что labels и data выходят из строя c. Пока вы сохраняете данные на фиксированном length из 10, используя Array.shift(), ярлыки неуклонно растут. Это может быть легко исправлено, если вы также оставите labels на фиксированном length, равном 10. 

let index = config.data.datasets[0].data.length;
function addData(a) {    
    config.data.labels.push('Data ' + ++index);
    config.data.datasets.forEach(dataset => dataset.data.push(a));    
    if (config.data.datasets[0].data.length > 10) {
        config.data.labels.shift();
        config.data.datasets[0].data.shift();
    }    
    myLineChart.update();
}

Пожалуйста, посмотрите на следующий пример исполняемого кода. Продолжайте нажимать кнопку Добавить значение , чтобы увидеть, что происходит. 

var ctx = document.getElementById('myChart').getContext('2d');
var config = {
    type: 'line',
    data: {
        labels: ['Data 1','Data 2','Data 3','Data 4','Data 5','Data 6','Data 7','Data 8','Data 9','Data 10'],
        datasets: [{
            label: 'CPU Allocation of all cores',
            data: [0,0,0,0,0,0,0,0,0,0],
            borderColor: [
                '#61559a',
                '#61559a',
                '#61559a',
                '#61559a',
                '#61559a',
                '#61559a',
                '#61559a',
                '#61559a',
                '#61559a',
                '#61559a'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scaleOverride : true,
        scaleSteps : 10,
        scaleStepWidth : 10,
        scaleStartValue : 0,
        responsive: true,
        title: {
            display: false
        },
        tooltips: {
            mode: 'index',
            intersect: false,
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: false
            }],
            yAxes: [{
                ticks: {
                    suggestedMin: 0,
                    suggestedMax: 100,
                    stepSize: 10,
                    beginAtZero: true
                },
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Percent'
                }
            }]
        }
    }
}
var myLineChart = new Chart(ctx, config);
let index = config.data.datasets[0].data.length;
function addData(a) {    
    config.data.labels.push('Data ' + ++index);
    config.data.datasets.forEach(dataset => dataset.data.push(a));    
    if (config.data.datasets[0].data.length > 10) {
        config.data.labels.shift();
        config.data.datasets[0].data.shift();
    }    
    myLineChart.update();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<button onClick="addData(Math.floor(Math.random() * (100 + 1)))">Add Value</button>
<canvas id="myChart" height="80"></canvas>
...