Question

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

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

中看到过

＆＃34;我尝试了不同的价值观，它只是推动了一切，包括传奇。我设法找到的最佳解决方法是调整afterDataLimits回调中的scale max。仅当图形完全接触顶部网格线时才会发生切断，因此如果在顶部仅添加1px，则可以正常工作。 - RocketR 4月19日8：26＆＃34;

但我找不到任何文档显示如何构建或在何处放回调用以实现它我已找到的信息

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

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

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

afterDataLimits？:(比例？：任何）=＆gt;空隙;

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

我将在下面显示我的代码结构，非常感谢任何帮助。

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

另外，你实际上并没有添加像素，所以也应该更正。

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

1 个答案: