如何将afterDataLimits回调添加到chart.js

嗨，我正在尝试在图表的顶部和底部添加1px，因为当它碰到图表的约束时，一半的线是隐藏的

我看到了这件事

“我尝试了不同的值，它只是将所有内容向下推，包括图例。我找到的最佳解决方法是在afterDataLimits回调中调整缩放最大值。只有当图形正好触及顶部网格线时，才会切断，因此如果在顶部仅添加1px，效果很好。”–RocketR 4月19日8:26”

但是我找不到任何说明如何构建或在何处放置回调以实现它的文档。我找到的信息是

确定数据限制后运行的afterDataLimits轴回调

afterDataLimits函数在确定数据限制后运行的未定义回调。传递了一个参数，即scale实例

public void setAfterDataLimits（JavaScriptFunction afterDataLimits） 在确定数据限制后运行的回调。传递了一个参数，即scale实例

afterDataLimits？：（比例？：任意）=>无效

这些都不能帮助我添加回拨

我将在下面展示我的代码结构，任何帮助都将不胜感激

 function initDashModalChart() {

var ctx = document.getElementById('dashModalChart');
var dec = $('#dashBarChart').data('decimals') || 2;
var referrer = $('#dashBarChart').data('isReferrer') || 0;
window.dashLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: $('#dashModalChart').data('labels'),
        datasets: [{
            data: $('#dashModalChart').data('leads'),
            label: 'Leads',
            amount: $('#dashModalChart').data('leads-amount'),
            fill: false,
            lineTension: 0.3,
            borderColor: "#00b7b7",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "#fff",
            pointBackgroundColor: "#00b7b7",
            pointBorderWidth: 2,
            radius: 6,
            pointRadius: 6,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "#00b7b7",
            pointHoverBorderWidth: 2,
            pointHitRadius: 10,
            spanGaps: false
        }, {
            data: $('#dashModalChart').data('quotes'),
            label: 'Quotes',
            amount: $('#dashModalChart').data('quotes-amount'),
            fill: false,
            lineTension: 0.3,
            borderColor: "#cd5985",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "#fff",
            pointBackgroundColor: "#cd5985",
            pointBorderWidth: 2,
            radius: 6,
            pointRadius: 6,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "#cd5985",
            pointHoverBorderWidth: 2,
            pointHitRadius: 10,
            spanGaps: false
        }, {
            data: $('#dashModalChart').data('cases'),
            label: 'Cases',
            amount: $('#dashModalChart').data('cases-amount'),
            fill: false,
            lineTension: 0.3,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "#213841",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "#fff",
            pointBackgroundColor: "#213841",
            pointBorderWidth: 2,
            radius: 6,
            pointRadius: 6,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "#213841",
            pointHoverBorderWidth: 2,
            pointHitRadius: 10,
            spanGaps: false
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        animation: {
            duration: 2000
        },
        layout: {
            padding: {
                top: 10,
                bottom: 10
            }
        },
        legend: {
            display: false
        },
        scales: {
            xAxes: [{
                gridLines: {
                    color: '#fff',
                    //drawTicks: false,
                    //zeroLineColor: "#6dc8c8"
                },
                ticks: {
                    fontColor: "#88909a",
                }
            }],
            yAxes: [{
                gridLines: {
                    color: "#ebebeb",
                    bodySpacing: 50,
                    drawTicks: false,
                    zeroLineColor: "#d1d4d8"
                },
                ticks: {
                    beginAtZero: true,
                    display: false,
                    //stepSize: 30
                }
            }]
        },
        tooltips: {
            mode: 'x',
            titleFontSize: 0,
            bodyFontSize: 10,
            bodySpacing: 10,
            multiKeyBackground: 'red',
            displayColors: true,
            callbacks: {
                afterDataLimits: function() {
                    i.callCallback(this.options.afterDataLimits, [this])
                },
                label: function(tooltipItem, data) {
                    var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
                    var datasetAmount = $.number(data.datasets[tooltipItem.datasetIndex].amount[tooltipItem.index], dec) || '0.00';
                    var label = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                    // edit tooltip text template
                    if (referrer == 1) {
                        return ' ' + datasetLabel.toUpperCase() + ': (' + label + ') '+$('#dashModalChart').data('currency')+datasetAmount;
                    } else {
                        return ' ' + datasetLabel.toUpperCase() + ': ' + label;
                    }
                },
                labelColor: function(tooltipItem, chartInstance) {
                    var meta = chartInstance.getDatasetMeta(tooltipItem.datasetIndex);
                    var activeElement = meta.data[tooltipItem.index];
                    var view = activeElement._view;
                    return {
                        borderColor: view.borderColor,
                        backgroundColor: view.borderColor
                    };
                },
            }
        }
    }
});

}

添加了你的代码，得到了这个

---

后数据限制
应在
选项.scales.yAxes
下添加回调，如下所示：

options: {
   scales: {
      yAxes: [{
         afterDataLimits: function(axis) {
            axis.max += 1; // add 1px to top
            axis.min -= 1; // add 1px to bottom
         }
      }]
   }
}

此外，您实际上并没有添加像素，因此也应该进行校正