仅在值可用时开始xAxis图表

Question

我有一个每年都有多个值的数据库。但是有时候，一年没有任何价值，尤其是第一个。 仅当第一个值可用时才可以启动xAxis以避免在图表的开头出现空白吗？

1

我想避免这种情况，请直接从2017年开始。 （我只显示了一行，简化了示例代码）

var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ["1989", "2004", "2014", "2017", "2019"],
                        datasets: [
                        {

                            label: 'Exceptionnel',
                            data: dataExcp,
                            backgroundColor: 'transparent',
                            borderColor: '#F44336',
                            borderWidth: 3,
                            pointWidth: 3,
                            pointRadius: 5,
                            pointHoverRadius: 6,
                            pointBorderColor: '#FFF',
                            pointBackgroundColor: '#F44336',
                            pointBorderWidth: 1,
                            pointHitRadius: 100,
                            datalabels: {
                                display: false
                            }
                        },
                        {
                            spanGaps: true,
                            label: 'Épave',
                            data: dataEpa,
                            backgroundColor: 'transparent',
                            borderColor: '#FF6D00',
                            borderWidth: 3,
                            pointWidth: 3,
                            pointRadius: 5,
                            pointHoverRadius: 6,
                            pointBorderColor: '#FFF',
                            pointBackgroundColor: '#FF6D00',
                            pointBorderWidth: 1,
                            pointHitRadius: 100,
                            datalabels: {
                                display: false
                            }
                        }]
                    },                     

                    options: {
                        responsive: 'true',
                        tooltips: {
                            enabled: true,
                            mode: 'index',
                            xPadding: 20,
                            yPadding: 20,
                            titleFontSize: 15,
                            titleMarginBottom: 10,
                            bodySpacing: 12,
                            caretPadding: 10,
                            callbacks: {
                                label: function (tooltipItem, data) {
                                    return ' ' + data.datasets[tooltipItem.datasetIndex].label + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString() + ' €';
                                }
                            }                            
                        },
                        legend: {
                            display: true,
                            position: 'bottom',
                            labels: {
                                padding: 20
                            }
                        },
                        scales: {
                            xAxes: [{
                                offset: true,
                                gridLines: {
                                    display: true
                                },
                                ticks: {
                                    fontStyle: 'bold'
                                }
                            }],
                            yAxes: [{
                                gridLines: {
                                    display: true
                                },
                                ticks: {
                                    beginAtZero: true,
                                    callback: function (value) {
                                        return value.toLocaleString() + ' €';
                                    },
                                    fontStyle: 'bold'
                                },
                                afterTickToLabelConversion: function(scaleInstance) {
                                // set the first and last tick to null so it does not display
                                // note, ticks[0] is the last tick and ticks[length - 1] is the first
                                scaleInstance.ticks[0] = null;
                                scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;

                                // need to do the same thing for this similiar array which is used internally
                                scaleInstance.ticksAsNumbers[0] = null;
                                scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
                                }
                            }]
                        },
                        zoom: {
                            // Boolean to enable zooming
                            enabled: true,

                            // Zooming directions. Remove the appropriate direction to disable 
                            // Eg. 'y' would only allow zooming in the y direction
                            mode: 'y',
                            rangeMin: {
                                y: -100
                            }
                        }
                    }
                });