Sencha Chart 마우스 오버 처리

2024. 11. 27. 22:29Javascript/Sencha

다른 이벤트는 안되서, tooltip에 이벤트 적용: alert('Event');

{
    xtype: 'cartesian',
    itemId: 'chart',
    width: 600,
    height: 400,
    store: {
        fields: ['date', 'DATA', 'value'],
        data: [
            { date: '2024-11-27 12:00', DATA: 'Data1', value: 50 },
            { date: '2024-11-27 13:00', DATA: 'Data2', value: 70 },
            // Add more records as needed
        ]
    },
    axes: [
        {
            type: 'numeric',
            position: 'left',
            title: 'Value'
        },
        {
            type: 'category',
            position: 'bottom',
            title: 'Time',
            fields: 'date'
        }
    ],
    series: [
        {
            type: 'line',
            title: 'Series1',
            xField: 'date',
            yField: 'value',
            style: {
                stroke: '#30BDA7',
                lineWidth: 2
            },
            marker: {
                type: 'circle',
                size: 4,
                fillStyle: '#30BDA7'
            },
            tooltip: {
                trackMouse: true,
                renderer: function (tooltip, record, item) {
                    // Set tooltip content
                    tooltip.setHtml(
                        `${item.series.getTitle()}: ${record.get('date')} - ${record.get('value')}%`
                    );
					
                    alert('Event');
                },
            }
        }
    ]
}