Chart.js 填充画布

Question

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

- HasanG

Answer 1

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

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

点击此处查看

- indusBull

Answer 2

我认为你的问题不是填充，但我可能错了。在我看来，你的问题是自动检测可绘制区域的高度，当你的数据中的最大数字很好，比如60。尝试查看是否在最大数字为61、62等时问题仍然存在。因此，我建议你处理数据，以避免出现这样的问题。如果处理数据不是一个选择，那么请尝试明确定义y轴上的最大刻度，使其略高于数据中的最大数字。在你的情况下，尝试使用以下内容：

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

因此，您需要计算数据中的最大值并添加一些小东西，以明确定义一个最大刻度，从而摆脱意外裁剪。可能有人有更好的理解和解决方案，但这是我能想到的选项。当然，还有处理您的数据。

- xnakos

---

是的，这解决了顶部截断的问题。我还设置了 ticks { min: -5 }，这解决了底部截断的问题，但导致了空白的空间。这很容易修复。谢谢。 - HasanG

谢谢兄弟，你救了我的一天。 - sampath challa

@xnakos：在 x 轴线上添加文本框是否可能？不需要将每个图形的点填充在顶部，而是需要在 x 轴线上显示该点。你能分享任何可用的代码吗？ - John Ken

Answer 3

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

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

Chart.js 3.x关于grace的文档

- Oriol

Answer 4

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

1- 如果有大量更改，数据会破坏，例如：

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

2- 'error' 总是等于我们边框宽度的一半。

3- 当我们在下一个提交中更改了 core.layoutService.js 的第36行时，可能引入了该错误。

其次，在 core.layoutService 的 'update' 函数中，我看到了两个奇怪的 padding 变量：

在第29行左右有这个函数，在第35和36行有奇怪的变量。

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

            var xPadding = 0;
            var yPadding = 0;

我一直在观察该函数对变量的操作，特别是yPadding。我没有看到任何有用的yPadding计算。在我看来，这就是问题所在。我们始终将yPadding保持为0，而且我认为这是应用于该文件另一个版本时出现的错误。

解决方案如下，我开发了这个方案，因为它是该提交的开发人员要求删除该行的原因。

这是一个热修复，我会提交PR，如果被批准，它将成为解决方案。

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

配置属性示例：

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

你可以在这里找到代码和所有的说明： https://github.com/chartjs/Chart.js/pull/3349

- Carlos Nuñez Tomeo