Chart.js 填充画布答案

【问题标题】：Chart.js padding canvasChart.js 填充画布
【发布时间】：2021-07-01 21:30:49
【问题描述】：

我正在使用最新的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
            }]
        }
    }
};

【问题讨论】：

标签： canvas padding chart.js

【解决方案1】：

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

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

Check here

【讨论】：

【解决方案2】：

我相信你的问题不是填充，但我可能是错的。正如我所看到的，您的问题是自动检测可绘制区域的高度，当您的数据中的最大数字很好而且很圆，比如 60 时。尝试在最大数为61、62等时问题是否仍然存在。所以，我建议您将数据煮熟，以免出现此类问题。如果数据烹饪不是一个选项，请尝试明确定义 y 轴上的最大刻度，使其略高于数据中的最大数字。在你的情况下，尝试使用这个：

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

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

【讨论】：

是的，解决了顶部截止问题。我还设置了刻度 { min: -5 } 这解决了底部截止，但造成了空白。可以轻松修复。谢谢
谢谢你，兄弟，你拯救了我的一天
@xnakos : 是否可以在 x 轴线上添加文本框。而不是填充每个图形顶部的点需要在 x 轴线上显示点。你能分享任何可用的代码

【解决方案3】：

如果你想增加 Y 轴上的“缓冲区”，使最大值不会一直显示到顶部，我已经使用“grace”成功地做到了。

options: {
   scales: {
     y: {
          type: 'linear',
          grace: '10%'
        }
    }
 }

Chartjs 3.x Documentation for grace

【讨论】：

【解决方案4】：

我已经研究过如何制作一个修补程序来解决这个问题。我看到了三种奇怪的行为：

1-如果有较大的变化，数据会中断，例如：

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

2- 'error' 总是边框宽度的一半。

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

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

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

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

            var xPadding = 0;
            var yPadding = 0;

我已经看到该函数对 var 的作用，特别是 yPadding。我无法使用 yPadding 完成任何有用的计算。在我看来，这就是问题所在。我们始终将 yPadding 保持为 0，恕我直言，这是在该文件的另一个版本中应用的错误。

解决方案如下，我开发了它，因为该提交的开发者背后的需求删除了该行。

这是一个修补程序，我将进行公关，如果它被批准，它将成为解决方案

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

配置道具示例：

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

这里有代码和所有解释： https://github.com/chartjs/Chart.js/pull/3349

【讨论】：