Chart(12)
-
Sencha chart mouse out 처리
mouse over된 item을 저장하는 변수 선언let lastHighlightedItem = null; // To track the last highlighted item globallymouse over시 처리할 내용 추가 및 hide 이벤트 추가{ 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: ..
2024.11.27 -
Sencha Chart 마우스 오버 처리
다른 이벤트는 안되서, 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: [ ..
2024.11.27 -
Sencha chart series 초기화
series를 동적 처리할때, chart.setSeries([]); 처럼 초기화를 해줘야 함// Assume you have a chart component with an ID of 'myChart'let chart = Ext.getCmp('myChart');// Function to update series dynamicallyfunction updateSeries(data, xField, yField) { if (!chart) { console.error('Chart not found!'); return; } // Remove existing series chart.setSeries([]); // Add a new series dynamically..
2024.11.24 -
Sencha chart에서 확대 축소 처리
itemhighlight: Highlights individual data points when hovered over.panzoom: Enables zooming and panning using gestures or mouse.zoomOnPanGesture: Enables zooming via gestures like pinch zoom or scroll wheel.axes: Specifies which axes allow panning and zooming.crosszoom: Allows rectangular zooming by dragging over a specific area.zoomOnPanGesture: Disables zooming when dragging. i..
2024.11.24 -
Sencha chart x축 글자 수직으로 표시하기
label의 rotate를 통해서 각도를 원하는 대로 조정할 수 있음 axes: [ { type: 'numeric', position: 'left', title: 'Value', grid: true, }, { type: 'category', position: 'bottom', title: 'Mo..
2024.11.24 -
Sencha chart series 동적 처리
function getSeriesByData2() { let data = [ { DATE: 1732167001000, A: 13, B: 'aks-userpool-260158-vmss000000' }, { DATE: 1732167001000, A: 13, B: 'aks-userpool-260158-vmss000001' }, { DATE: 1732167001000, A: 14, B: 'aks-userpool-260158-vmss000002' }, { DATE: 1732167061000, A: 7, B: 'aks-userpool-260158-vmss000003' }, { DATE: 1732167061000, A: 17, B: 'aks-user..
2024.11.23