Chart.js填充画布 [英] Chart.js padding canvas

问题描述

我使用最新的chart.js库来生成一个没有尺度的折线图，但是有一个填充问题，顶点和底点被截断。我无法看到任何用于填充画布的选项。

I'm using latest chart.js library to generate a line chart without scales, but there is a padding problem and top and bottom points are cut off. I couldn't see any option for padding canvas.

我的配置如下。

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轴上的最大刻度，以使其仅超过数据中的最大数。在你的情况下，尝试使用这个：

I believe that your problem is not padding, but I could be wrong. As I see it, your problem is the auto-detection of the height of the drawable area, when the maximum number in your data is nice and round, like 60 is. Try to see if the problem persists when the maximum number is 61, 62, etc. So, I suggest you cook your data, so that no such problems occur. If data-cooking is not an option, try to explicitly define the maximum tick in the y-axis, so that it is just a bit over the maximum number in the data. In your case, try using this:

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

将需要计算数据中的最大数量，并添加一些小东西，以便明确定义一个最大值，将摆脱意想不到的裁剪。有人可以有一个更好的理解和解决方案，但这是我可以想到的选择。那当然，并烹饪你的数据，

So you will need to calculate the maximum number in the data and add something small, in order to explicitly define a maximum tick that will get rid of the unexpected cropping. Someone could have a better understanding and solution but that is the option I can think of. That, and cooking your data, of course.

这篇关于Chart.js填充画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！