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

Question

嗨，我正在尝试在图表的顶部和底部添加 1px，因为当它达到图表的约束时，该行被隐藏了一半。



我在问题 Chart.js line chart is cut off at the top? 中看到过

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

但是我找不到任何显示如何构建或在哪里放置回调以实现它的文档我找到的信息是

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

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

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

afterDataLimits?: (scale?: any) => void;

这些都没有帮助我添加回电。

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

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

}

添加了您的代码并得到了这个

Answer 1

afterDataLimits 回调应该在options.scales.yAxes下添加，像这样:

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

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