afterDataLimits 콜백을 chart.js에 추가하는 방법

Question

안녕하십니까. 차트의 위쪽과 아래쪽에 차트의 제약 조건에 맞을 때 1px를 추가하려고합니다.

내가 문제에서 본 Chart.js line chart is cut off at the top?

은 "나는 다른 값을 시도, 그것은 단지 전설을 포함하여 아래로 모든 것을 밀어. 내가 발견 할 수있는 가장 좋은 해결 방법은 afterDataLimits의 규모 최대를 조정하다 콜백. 그래프가 꼭대기 그리드 선에 정확히 닿으면 절단이 발생하므로 정상에 1px 만 추가하면 정상적으로 작동합니다. - RocketR Apr 19 at 8:26 "

하지만 문서를 찾을 수 없습니다. 전화를 다시 구조화하거나 배치 할 위치를 보여줍니다. 그것이 찾은 정보를 보완하십시오.

afterDataLimits 축 데이터 제한 후 실행되는 콜백이 결정됩니다.

afterDataLimits 함수 정의되지 않음 데이터 제한 후 실행되는 콜백이 결정됩니다. 하나의 인수 인 척도 인스턴스를 전달했습니다.

public void setAfterDataLimits (JavaScriptFunction afterDataLimits) 데이터 제한 후 실행되는 콜백이 결정됩니다. 하나의 인수 인 척도 인스턴스를 전달했습니다.

afterDataLimits? :(비율 : 임의) => 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 
     } 
     }] 
    } 
} 

또한 실제로 픽셀을 추가하지 않으므로 수정해야합니다.