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类似的问题吗？

- L.U.

Answer 1

您可以使用偏移量

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

- pranab

---

你有没有办法调整偏移量的填充量？ - Richard Modad

确实，我很愿意使用偏移量，但空间太大了... - CrossTheDev

Answer 2

我通过在图表的右侧添加 padding 值来解决了这个问题。我试着调整了确切的数字，对于我的图表来说，4看起来比较合适。但是我想正确的数字将取决于您的 pointRadius 大小和其他变量。这是我所做的更改后的效果。

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

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

这很烦人。而且，这应该是默认设置，真的。但这个方法解决了我的问题。

注：本文含有html标签，请勿删除。

- L.U.

---

在布局上添加填充对我来说只是将整个折线图向内推，但数据点本身仍然被切断。这里有一个GIF：https://cln.sh/EpXrdP - Clifton Labrum

offset: true 是处理这个问题的正确方式。 - Sam

对我来说，设置clip选项是唯一修复它的方法。 - JunKim

Answer 3

正如@JunKim所提到的，将clip: false添加到选项中解决了我的问题，在填充不起作用之后。

options:
   clip: false,
   ...

- Lord Luce