chart.js - 如何在 chart.js 图表中形成差距？

Question

这是我需要创建的必需图形。谁能告诉我如何在 y 轴和 x 轴的第一个标签(一月)之间创建间隙？

Answer 1

你可以通过创建一个图表插件来实现这一点，就像这样......

Chart.plugins.register({
    afterUpdate: function(chart) {
        var dataset = chart.config.data.datasets[0];
        var offset = 27;
        for (var i = 0; i < dataset.data.length; i++) {
            var model = dataset._meta[0].data[i]._model;
            model.x += offset;
            model.controlPointNextX += offset;
            model.controlPointPreviousX += offset;
        }
    }
});

ᴅᴇᴍᴏ

// register plugin
Chart.plugins.register({
    afterUpdate: function(chart) {
        var dataset = chart.config.data.datasets[0];
        var offset = 27; //set that suits the best
        for (var i = 0; i < dataset.data.length; i++) {
            var model = dataset._meta[0].data[i]._model;
            model.x += offset;
            model.controlPointNextX += offset;
            model.controlPointPreviousX += offset;
        }
    }
});

// generate chart
var ctx = document.querySelector('#canvas').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
            label: 'Line Chart',
            data: [10, 20, 18, 16, 19, 22],
            backgroundColor: 'rgba(75,192,192, 0.4)',
            borderColor: '#4bc0c0',
            pointBackgroundColor: 'black',
            tension: 0,
        }]
    },
    options: {
        responsive: false,
        scales: {
            xAxes: [{
                gridLines: {
                    offsetGridLines: true,
                    display: false
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true
                },
                gridLines: {
                    display: false
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas" width="340" height="180"></canvas>