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
            }]
        }
    }
};

Answer 1

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

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

点击这里

Answer 2

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

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

Chartjs 3.x 恩典文档

Answer 3

我相信你的问题不是填充,但我可能是错的.在我看来,你的问题是自动检测可绘制区域的高度,当你的数据中的最大数字是好的和圆形时,如60.尝试看看,当最大数目为61,62,等等.所以,我建议你做饭你的数据,所以出现没有这样的问题,问题仍然存在.如果数据烹饪不是一个选项,请尝试明确定义y轴中的最大刻度,以使其略高于数据中的最大数量.在您的情况下,尝试使用此:

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

因此,您需要计算数据中的最大数量并添加一些小的数据,以便明确定义将消除意外裁剪的最大值.有人可以有更好的理解和解决方案,但这是我能想到的选择.当然,那就是烹饪你的数据.