ChartJS 均匀分布点答案

【问题标题】：ChartJS distribute points evenlyChartJS 均匀分布点
【发布时间】：2020-03-28 18:49:52
【问题描述】：

我想平均分配我的线的所有点。默认情况下看起来不错：

如果我用这个函数添加数据，我会得到这个结果：

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();
}

如果我添加更多元素，它就会变得不可读。我已经尝试修复它，所以帮助会很好:)。您可以在此处查看和查看配置和整个代码： https://pastebin.com/wrTak2Rx

【问题讨论】：

标签： javascript json graph charts chart.js

【解决方案1】：

addData 函数中的问题是 labels 和 data 不同步。当您使用Array.shift() 将数据保持在固定的length 10 时，标签正在稳步增长。如果您还将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();
}

请查看以下可运行代码示例。继续按 Add Value 按钮，看看会发生什么。

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>

【讨论】：