增加y轴和第一个x轴值之间的差距chart.js

Question

我想在chart.js的折线图中显示点，但是x轴上的第一个索引和最后一个索引并没有完全显示出来，如图

所示。

如何从y轴增加x轴的第一个值和最后一个值之间的距离。这是我的图表代码

var config = {
        type: 'line',
        data: {
            labels: ['1809_1970', '1971_1975', '1976_1980', '1981_1985', '1986_1990', '1991_1995', '1996_2000','2001_2005','2006_2010','2011_2012','2013_2015'],
            datasets: [d1,d2,d3]
        },
        options: {
            responsive: true,

            title: {
                display: true,
                text: 'points chart',

                    },
            tooltips: {


                callbacks: {
                label: function(tooltipItem, data) {
                var label = data.datasets[tooltipItem.datasetIndex].cui[tooltipItem.xLabel] || '';
                return 'CUI'+' :: '+label ;

                },
                afterLabel: function(tooltipItem, data) {

                                var cui_name =  data.datasets[tooltipItem.datasetIndex].cui_name[tooltipItem.xLabel] || '';
                                return ['NAME'+' :: '+cui_name];
        }

            }

            },

            hover: {
                mode: 'index',
                intersect: true
            },
            pan: {
                    enabled: true,
                    mode: 'y'
                },
                zoom: {
                    enabled: true,
                    mode: 'y',
                    speed: 0.025


                },
                    scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Time Frame'
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Score'
                    }
                }]
            }

        }
    };

Answer 1

我需要完成同样的事情，并且能够将offset: true添加到xAxes选项中来获得所需的结果。

xAxes: [{
  offset: true, // <-- This right here
  display: true,
  scaleLabel: {
    display: true,
    labelString: 'Time Frame'
  }
}],