Chart.js标签和点在右边被截断

Question

似乎最后一个日期标签在chart.js中的图表上已经截止。应该有一个2018年的数据点。在研究它时，我发现它建议添加布局填充。我试过了，但它完全禁用了图表。是否有人对我的布局填充为何不起作用有任何替代解决方案或想法？

        var myChart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: dollar.years,
            datasets: [
              {label: 'Cdn dollar in cents',
                data: dollar.vals,
                borderColor: 'rgb(153,222,101)',
                backgroundColor: 'rgb(153,222,101, 0.2)',
                pointRadius: 0,
                borderWidth: 6,
                }]
              },

options: {
responsive: true,
title: {
display: false
},

legend: {
display: false
},

labels: {
padding:1
},

scales: {
yAxes: [{
ticks: {
min: 0,
max: 5,
stepSize: 1
}
}],

xAxes: [{
type: "time",
time: {
unit: "year",
tooltipFormat: "YYYY"
},

ticks: {
display: true,
labelOffset: -1,
maxTicksLimit: 5,
drawOnChartArea: false,
autoSkip: false,
maxRotation: 0,
minRotation: 0,
padding: 5

},
}],

}
}
  });
  }

Answer 1

选项layout.padding应该可以工作（请参见下面的代码段），但是您需要仔细选择值，以便注意完全隐藏图表区域。但是，我宁愿定义layout.padding以确保显示2018年的滴答声，即使只有截至2017年的数据也可用。

xAxes.ticks.max

const years = [];
const vals = [];
for (let year = 1968; year <= 2018; year++) {
  years.push(year.toString());
  vals.push(Math.floor(Math.random() * 3) + 1);  
}

var myChart = new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: {
    labels: years,
    datasets: [{
      label: 'Cdn dollar in cents',
      data: vals,
      borderColor: 'rgb(153,222,101)',
      backgroundColor: 'rgb(153,222,101, 0.2)',
      pointRadius: 0,
      borderWidth: 6
    }]
  },
  options: {
    responsive: true,
    layout: {
      padding: {
        left: 0,
        right: 100,
        top: 0,
        bottom: 0
      }
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 4,
          stepSize: 1
        }
      }],
      xAxes: [{
        type: "time",        
        time: {
          parser: 'YYYY',
          unit: "year",
          tooltipFormat: "YYYY"
        },
        ticks: {
          max: "2018",
          maxTicksLimit: 5,
          maxRotation: 0
        }
      }]
    }
  }
});

canvas {
  max-width: 400px;
}