通过Chart.js设置空格，刻度标签之间的边距并对齐第一个和最后一个xAxes标签？

Question

嗨，我尝试做类似图片上的图表。

这是我的代码：

Chart.plugins.register({
            beforeDraw: function (chartInstance, easing) {
                var ctx = chartInstance.chart.ctx;
                ctx.fillStyle = '#F9F9FA'; // your color here
                var chartArea = chartInstance.chartArea;
                ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
                ctx.font = "normal 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
                ctx.fillStyle = '#666'; // your color here
                ctx.fillText("Dzień", 10, 330);
            }
        });

        var time_start = "2013-05-01";
        var time_end = "2013-05-31";

        function createXlabel(day) {
            var label = moment(time_start);
            label = moment(label).add(day, 'day').format();
            return moment(label).format();
        }

        var ctx = document.getElementById('backupDiskStorage').getContext('2d');

        var min = moment(time_start).format();
        var max = moment(time_end).format();

        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [createXlabel(0), createXlabel(5), createXlabel(10), createXlabel(15), createXlabel(20), createXlabel(25), createXlabel(31)],
                datasets: [{
                    label: 'Transfer',
                    backgroundColor: "rgb(218,236,250)",
                    borderColor: 'rgb(111,162,211)',
                    data: [{
                        x: createXlabel(0),
                        y: 25
                    }, {
                        x: createXlabel(5),
                        y: 50
                    }, {
                        x: createXlabel(10),
                        y: 150
                    }, {
                        x: createXlabel(15),
                        y: 250
                    }, {
                        x: createXlabel(25),
                        y: 200
                    }, {
                        x: createXlabel(31),
                        y: 50
                    }],
                    pointRadius: 0,
                }]
            },
            options: {
                tooltips: {
                    enabled: false
                },
                responsive: true,
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: "Zajętość dysku: Ostatnie 30 dni"
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        position: 'bottom',
                        unit: 'day',
                        offset: true,
                        distribution: 'linear',
                        gridLines: {
                            display : true,
                            offsetGridLines: false
                        },
                        scaleLabel: {
                            display: false
                        },
                        time: {
                            displayFormats: {
                                'day': 'DD.MM'
                            },
                            unitStepSize: 5,
                            max: max,
                            min: min
                        },
                        ticks: {
                            beginAtZero: true,
                            maxTicksLimit: 7,
                            stepSize: 5,
                            autoSkip: false
                        }
                    }],
                    yAxes: [{
                        type: 'linear',
                        position: 'left',
                        gridLines: {
                            display: false
                        },
                        ticks: {
                            min: 0,
                            beginAtZero: true,
                            max: 300,
                            stepSize: 50,
                            callback: function (value) {
                                return value + " GB";
                            }
                        },
                        afterBuildTicks: function (discStorage) {
                            discStorage.ticks.splice($.inArray(0, discStorage.ticks), 1);
                        }
                    }]
                }
            },
        });

结果是：

我如何像第一个屏幕一样与第一个xAxes标签对齐并与最后一个xAxes标签对齐？现在它们对齐中心，这是我所不允许的。 另外，如果将要对齐，则其他之间的“空格”应该降低以对齐所有。

我会处理红线，但是我花了很多时间，我可以找到解决方法。 我会在Drw之前使用这个插件吗？