Chart.js自动缩放

Question

我一直在测试chart.js，可能会把它包含在一个项目中。我只有一个小问题。它不能正确缩放某些数据集。我在SO中发现了一些类似的问题，但没有什么能真正解决我的问题。

这是我的图表与一些数据集的样子：

​

由于某些原因，最大值(2.2)看起来丑陋得像地狱。原因是，在这种情况下，数据集有一组三个重复的值(2.2，2.2，2.2)。我希望在这个系列的顶部有一些空间，这样看起来会更合理一些。

如何正确地在系列行的顶部添加“填充”？我想要一个解决方案，我可以依靠chart.js找出最大值，然后可能在刻度上用一些填充(如x+ 10)来更新它。问题是，我不能硬编码最小最大值，因为我可以有超过200个不同的值可供选择，而且它们在规模上可能会有很大的变化。

下面是我现在呈现图表的方式：

    return new Chart(context, {
    type: 'line',
    data: { 
        labels: labels.data,
        datasets: dataSets
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            ticks: {
                beginAtZero: false
            },
            yAxes: [{
                ticks: {
                    beginAtZero: false
                },
                id: 'A',
                type: 'linear',
                position: 'left',
            }, {
                ticks: {
                    beginAtZero: false
                },
                display: displayBAxis,
                id: 'B',
                type: 'linear',
                position: 'right',
            }]
        }
    }
});

Answer 1

这可能不是最干净的方式，但你可以在你认为合适的时候使用它。

简而言之，您需要创建一个从所有dataSets数组中找出最大值的函数，并在yAxes.ticks中将max设置为该函数的返回值。

更多细节见下文

在这里首先引用：

data:{
    labels: labels.data,
    datasets: dataSets //talking about this first
}

创建一个函数，它将遍历这些数组并获得所有数组中的最大值。我是这样做的，但我相信你可以做得更好：

function getMax(){
    var max = 0;
    dataSets.forEach(function(x, i){        
        max = Math.max(max, Math.max.apply(null, x.data));
    });

    return max + 2;
}

然后，在yAxes中的return中，您应该能够拥有：

ticks: {
    beginAtZero: false,
    max: getMax()
},

Answer 2

您可以找到数据集的最小和最大值，然后添加/减去差值的百分比(范围)。

例如，假设您使用范围的1%。

0.1，0.2，0.5给出(1%)x(0.5-0.1)=0.004，因此最小，max=0.096,0.504。

1500,1800,3500,3600给出(1%)x(3600-1500)=21，所以最小，max=1479,3621。