Canvas Chart.js填充画布

我正在使用最新的chart.js库生成一个没有刻度的折线图，但存在填充问题，顶部和底部的点被截断。我看不到任何填充画布的选项

我的配置如下

var config = {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "Sales",
            data: [10, 20, 50, 25, 60, 12, 48],
            fill: true,
            lineTension: 0.25,
            borderColor: "#558aeb",
            backgroundColor: "#558aeb"
        }]
    },
    options: {
        responsive: true,
        legend: {
            display: false
        },
        tooltips: {
            mode: 'label'
        },
        hover: {
            mode: 'dataset'
        },
        scales: {
            xAxes: [{
                display: false
            }],
            yAxes: [{
                display: false
            }]
        }
    }
};

---

我相信你的问题不在于填充，但我可能错了。在我看来，您的问题是自动检测可绘制区域的高度，当您的数据中的最大数字是好的和圆的，比如60。尝试查看当最大值为61、62等时问题是否仍然存在。因此，我建议您修改数据，以便不会出现此类问题。如果数据烹饪不是一个选项，请尝试显式定义y轴上的最大刻度，使其略高于数据中的最大数字。在您的情况下，请尝试使用以下方法：

yAxes: [{
    display: false,
    ticks: {
        max: 62
    }
}]

---

因此，您需要计算数据中的最大数字，并添加一些小的内容，以便明确定义最大刻度，从而消除意外的裁剪。有人可以有更好的理解和解决方案，但这是我能想到的选择。当然，还有修改你的数据。

我一直在研究如何制作热修复程序来解决这个问题。我看到了三种奇怪的行为：

1-如果发生重大变化，数据中断，例如：

[0, 10, 70, 30, 20, 12, 50, 200, 200, 200, 200, 200]

2.“误差”始终是边界宽度高度的一半

3-在下一次提交时更改core.layoutService.js的第36行时，可能会引入该错误

其次，我在core.layoutService的函数“update”中看到了两个奇怪的填充变量：

在第29行，我们有函数，在第35行和第36行，我们有奇怪的变量

// The most important function
        update: function(chartInstance, width, height) {
            if (!chartInstance) {
                return;
            }

            var xPadding = 0;
            var yPadding = 0;

我已经了解了该函数对该变量的作用，特别是对yPadding的作用。我无法使用YPC完成任何有用的计算。在我看来，这就是问题所在。我们始终维护添加到0和IMHO的YP，这是在该文件的另一个版本中应用的错误

解决方案如下，我开发了它，因为这是开发人员在提交删除行之后的需求

这是一个修补程序，我会做一个公关，如果它被批准，这将是解决方案

如果您应用该代码，您可以在图表的样式配置上设置填充，而且，如果您不应用任何配置，他将根据图表高度采用默认设置

配置道具示例：

padding: {
  x: 5,
  y: 4
},

这里有代码和所有说明：

---

如果我理解正确的问题，当前版本（>2.4）的Chart JS支持围绕图表布局填充配置选项

layout: {
    padding: {
        // Any unspecified dimensions are assumed to be 0                     
        top: 25
    }
}

---

是的，解决了顶部截断问题。我还设置了记号{min:-5}，这解决了底部截断问题，但造成了空白。很容易修复。谢谢谢谢你兄弟你救了我的命day@xnakos：是否可以在x轴线上添加文本框。除了填充每个图形顶部的点，还需要在x轴线上显示点。您可以共享任何可用代码吗