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

Question

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

\n\n

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

\n\n

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

\n\n

我\xe2\x80\x99ve在这里重新创建了这个问题：\n https://codepen.io/LeoU/pen/gVLybO

\n\n

这是我的选项设置。

\n\n

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

\n\n

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

\n

Answer 1

您可以使用偏移量

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

Answer 2

我通过向图表的手侧添加padding值来解决此问题。right\n我尝试了确切的数字，4 看起来很适合我的图表。但我\xe2\x80\x99d想象正确的数字将取决于你的大小pointRadius和你拥有的其他变量。\n这就是我的变化后的样子。

\n\n

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

\n\n

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

\n\n

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

\n