时间戳

首页 > 解决方案 > 增加y轴和第一个x轴值之间的差距chart.js

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

问题描述

我想在 chart.js 的折线图中显示点，但是，x 轴上的第一个和最后一个索引没有完全显示，如图所示在此处输入图像描述

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

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

        }
    };

标签： chart.js

解决方案

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

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

推荐阅读