javascript - 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()
},