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

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

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

Answer 2

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

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

[0.1，0.2，0.5]得出（1％）x（0.5-0.1）= 0.004，所以[min，max] = [0.096,0.504]。

[1500，1800，3500，3600]得出（1％）x（3600-1500）= 21，所以[min，max] = [1479,3621]。

Chart.js自动缩放

2 个答案: