Sencha chart의 x축의 값 변경하기

Date format을 변경

Ext.create('Ext.chart.CartesianChart', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    store: {
        fields: ['date', 'value'],
        data: [
            { date: new Date(2024, 10, 1), value: 10 },
            { date: new Date(2024, 10, 2), value: 20 },
            { date: new Date(2024, 10, 3), value: 30 },
            { date: new Date(2024, 10, 4), value: 25 }
        ]
    },
    axes: [
        {
            type: 'numeric',
            position: 'left',
            title: {
                text: 'Value',
                style: {
                    fontSize: '12px'
                }
            }
        },
        {
            type: 'time', // Specifies that the axis type is a date
            position: 'bottom',
            dateFormat: 'Y-m-d', // Optional: Specifies default formatting
            title: {
                text: 'Date',
                style: {
                    fontSize: '12px'
                }
            },
            fields: ['date'], // Field name for the x-axis
            renderer: function (value) {
                // Format the date using Ext.Date.format
                return Ext.Date.format(value, 'd M Y'); // Example: '01 Nov 2024'
            }
        }
    ],
    series: [
        {
            type: 'line',
            xField: 'date',
            yField: 'value',
            marker: {
                type: 'circle',
                size: 4
            },
            highlight: {
                fillStyle: '#000',
                radius: 5
            }
        }
    ]
});

조회 기간에 따라 x축을 동적으로 보여주기: rederer의 세부 내용은 브라우져에서 확인해야 함

Ext.create('Ext.chart.CartesianChart', {
    renderTo: Ext.getBody(),
    width: 800,
    height: 400,
    store: {
        fields: ['timestamp', 'value'],
        data: [
            { timestamp: new Date(2024, 10, 20, 0, 0), value: 10 },
            { timestamp: new Date(2024, 10, 20, 6, 0), value: 20 },
            { timestamp: new Date(2024, 10, 20, 12, 0), value: 30 },
            { timestamp: new Date(2024, 10, 21, 0, 0), value: 40 },
            { timestamp: new Date(2024, 10, 22, 0, 0), value: 50 }
        ]
    },
    axes: [
        {
            type: 'numeric',
            position: 'left',
            title: {
                text: 'Value',
                style: {
                    fontSize: '12px'
                }
            }
        },
        {
            type: 'time',
            position: 'bottom',
            fields: ['timestamp'],
            title: {
                text: 'Time',
                style: {
                    fontSize: '12px'
                }
            },
            dateFormat: 'd-m-Y', // Default format
            renderer: function (axis, label, layoutContext, lastLabel) {
                const minValue = layoutContext.visibleMin;
                const maxValue = layoutContext.visibleMax;

                const rangeInMilliseconds = maxValue - minValue;

                // Determine the range in hours/days
                const rangeInHours = rangeInMilliseconds / (1000 * 60 * 60);

                if (rangeInHours <= 24) {
                    // Show only time (hours and minutes) for ranges within 1 day
                    return Ext.Date.format(value, 'H:i');
                } else if (rangeInHours <= 168) {
                    // Show date and time for ranges within 1 week
                    return Ext.Date.format(value, 'd M H:i');
                } else {
                    // Show only date for larger ranges
                    return Ext.Date.format(value, 'd M Y');
                }
            }
        }
    ],
    series: [
        {
            type: 'line',
            xField: 'timestamp',
            yField: 'value',
            marker: {
                type: 'circle',
                size: 4
            },
            highlight: {
                fillStyle: '#000',
                radius: 5
            }
        }
    ]
});