chartjs改进显示标签

Question

I use ChartJS for display data with date ... now if select 01-05-2019 and last date is 15-07-2019 display label is not improvement .. how to improvement label when i select long date

code:

function initCharts(date, type){
        var timeOptions = {};
        var numberDays = [];
        if( type == 'month'){
            var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
            numberDays = MONTHS;
            timeOptions = {
                parser: 'MMM YYYY',
                tooltipFormat: 'll',
                unit: 'month',
                unitStepSize: 1,
                displayFormats: {
                    'month': 'MMM YYYY'
                }
            }
        }else if (type == 'Week'){
            var numberWeek = moment('Y-12-28').format('W');
            for (var i=1; i <= numberWeek;i++){
                numberDays.push(moment().format('Y') + '-'+i);
            }
            timeOptions = {
                parser: 'YYYY-W',
                tooltipFormat: 'll',
                unit: 'week',
                unitStepSize: 1,
                displayFormats: {
                    'week': 'YYYY-W'
                }
            }
        }else {
            timeOptions = {
                parser: 'YYYY-MM-DD',
                tooltipFormat: 'll',
                unit: 'day',
                unitStepSize: 1,
                displayFormats: {
                    'day': 'YYYY-MM-DD'
                }
            }
            if(date){
                var dateUse = new Date(date);
                var secondDate = new Date($('#endDateOfChart').val());
                var diffDays = differenceBetweenDays(dateUse, secondDate);
            } else {
                var date = new Date();
                var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
                var diffDays = differenceBetweenDays(firstDay, date);
                var dateUse = firstDay;
            }
            for(var i =0; i <= diffDays;i++){
                numberDays.push(newDateString(dateUse, i));
            }
        }
        console.log(numberDays);

        var ctx = $('.blog-overview-users');
        var color = Chart.helpers.color;
        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: numberDays,
                datasets: [{
                    label: 'CA Marypop',
                    backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                    borderColor: window.chartColors.red,
                    fill: false,
                    data: [],
                }]
            },
            options: {
                title: {
                    text: 'CA Marypop'
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        time: timeOptions,
                        scaleLabel: {
                            display: true,
                            labelString: 'Date'
                        }
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'value'
                        },
                    }]
                },
            }
        });
        return chart;
    }

screen: part label when yellow color is not improvement and not clear to the customer

enter image description here

Answer 1

You're probably setting too many options.

See a simple example below, with many points, and the default time axis is not as cluttered (BTW the example has been copied from https://stackoverflow.com/a/54308643 :

 let now = (new Date()).getTime(), minutes = [], days = [], options = { scales: { xAxes: [{ type: 'time' }] } }; for (let i = 0; i < 100; i++) { minutes.push({ x: now + (60000 * i), y: 10 }); days.push({ x: now + (86400000 * i), y: 10 }); } new Chart(document.getElementById('canvas1'), { type: 'line', data: { datasets: [{ data: minutes }] }, options: options }); new Chart(document.getElementById('canvas2'), { type: 'line', data: { datasets: [{ data: days }] }, options: options }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script> <canvas id="canvas1"></canvas> <canvas id="canvas2"></canvas>