Chart.js - 折线图最右边的数据点截止

Question

使用 Chart.js 2.8.0 版绘制基本折线图。 观察最右边的数据点被切断。但最左边的数据点（第一个数据点）看起来完好无损。

我通过更改 pointRadius 的值来更改数据点圆的大小。但即使是最小值，数据点仍然会被切断。

我没有使用任何插件或花哨的设置。我用浅灰色背景色填充图表。但除此之外，其他一切都是一个盒子标准 Chart.js。

我在这里重现了这个问题： https://codepen.io/LeoU/pen/gVLybO

这是我的选项设置。

options: {
      legend: {
        display: false,
      },
      tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
              var tooltipValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
              return "£" + parseInt(tooltipValue).toLocaleString();
          }
      }
      },    
        scales: {
          yAxes: [{ 
                gridLines: {
                  color: "white",
                  lineWidth: 2
                },
                ticks: {
                  beginAtZero: true,
              min: 0,
              stepSize: 500000,
              callback: function(value, index, values) {
              return "£" + value.toLocaleString();
            },
          },
          scaleLabel: {
              display: true,
              labelString: "Median house price"
        }
              }],
            xAxes: [{
              display: false, 
                ticks: {
                    display: false 
                }
            }]
        }
    },

有人在 Chart.js 中见过类似的问题吗？

Answer 1

您可以使用偏移量

scales: {
 xAxes: [{
     offset: true
  }]
}

Answer 2

我通过将

padding

值添加到图表的

right

手侧来修复此问题。 我尝试了一下确切的数字，4 看起来很适合我的图表。但我想正确的数字将取决于你的

pointRadius

的大小和你拥有的其他变量。 这就是我的变化后的样子。

options: {
        layout: {
            padding: {
                left: 0,
                right: 4,
                top: 0,
                bottom: 0
            }
        }
    }

有关 Chart.js 填充的更多信息，这是他们的说明页面。 https://www.chartjs.org/docs/latest/configuration/layout.html

这很烦人。而且，这确实应该是默认设置。但这解决了我的问题。

Answer 3

正如 @JunKim 提到的，在填充不起作用后，在选项中添加

clip: false

解决了我的问题。

options:
   clip: false,
   ...