Docs Menu

์ฐจํŠธ ์š”์†Œ ๊ฐ•์กฐ ํ‘œ์‹œ

์ด ํŽ˜์ด์ง€์˜ ๋‚ด์šฉ

Atlas Charts ์ž„๋ฒ ๋”ฉ JavaScript SDK๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ž„๋ฒ ๋”ฉ๋œ ๋Œ€์‹œ๋ณด๋“œ ๋‚ด์˜ Atlas Charts ๋ฐ Atlas Charts์—์„œ ํŠน์ • ์š”์†Œ ๋ฐ ํด๋ฆญ๋œ ์ด๋ฒคํŠธ ๋ฅผ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์œผ๋กœ ๊ฐ•์กฐ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‹œ์ž‘ ํ•˜๊ธฐ ์ „์— ๋ฒ„์ „ 2.1.0 ์ด์ƒ ์ฐจํŠธ ์ž„๋ฒ ๋”ฉ JavaScript SDK.

๊ฐ•์กฐ ํ‘œ์‹œ๋ฅผ ํ™œ์„ฑํ™”ํ•˜๋Š” ์ฐจํŠธ ์ž„๋ฒ ๋”ฉ JavaScript SDK ๋ฉ”์„œ๋“œ์˜ ๊ตฌ๋ฌธ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

charts.setHighlight(selectionFilter);

์ฐธ๊ณ 

๋‚ด์žฅ๋œ ๋Œ€์‹œ๋ณด๋“œ ๋‚ด์—์„œ Atlas Charts๋ฅผ ๊ฐ•์กฐ ํ‘œ์‹œํ•˜๋ ค๋ฉด ๋จผ์ € ๋‹ค์Œ ๋ฉ”์„œ๋“œ๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ๋Œ€์‹œ๋ณด๋“œ ์ธ์Šคํ„ด์Šค์—์„œ ํŠน์ • Atlas Charts๋ฅผ ๊ฒ€์ƒ‰ํ•ฉ๋‹ˆ๋‹ค.

dashboard.getChart('<chartID>');

setHighlight ๋ฉ”์„œ๋“œ๋Š” MQL ํ•„ํ„ฐ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜ ์˜ˆ์ œ์— ํ‘œ์‹œ๋œ ๋Œ€๋กœ setHighlight ๋ฉ”์„œ๋“œ์— ์ง์ ‘ MQL ํ•„ํ„ฐ๋ฅผ ์ œ๊ณตํ•˜๊ฑฐ๋‚˜ ํด๋ฆญ ์ด๋ฒคํŠธ ํŽ˜์ด๋กœ๋“œ selectionFilter ๋ฅผ ํ†ตํ•ด ์ œ๊ณตํ•˜์—ฌ ํŠน์ • ์š”์†Œ์™€ ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ๊ฐ•์กฐ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ์‹œ

chart.setHighlight(
{
city: { $nin: ['New York', 'London', 'Paris'] }
}
)

selectionFilter ์€(๋Š”) ์ฐจํŠธ์˜ ์นดํ…Œ๊ณ ๋ฆฌ ๋˜๋Š” ์‹œ๋ฆฌ์ฆˆ ์ฑ„๋„์— ์‚ฌ์šฉ๋œ ๊ฐ’๊ณผ ์ผ์น˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Atlas Charts ์ž„๋ฒ ๋”ฉ JavaScript SDK์—๋Š” ๊ฐ•์กฐ ํ‘œ์‹œ ์ฟผ๋ฆฌ๋ฅผ ๊ฒ€์ƒ‰ํ•˜๊ธฐ ์œ„ํ•œ highlight ์˜ต์…˜๋„ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

const highlight = chart.getHighlight();

highlight ์˜ต์…˜์€ MQL ํ•„ํ„ฐ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” Javascript ๊ฐ์ฒด์˜ ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ฐจํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ ๋˜๋Š” ์ฐจํŠธ๊ฐ€ ๋ Œ๋”๋ง๋œ ํ›„์— highlight ์˜ต์…˜์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ ์ฟผ๋ฆฌ ์š”์†Œ๋ฅผ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹ ๊ฐ•์กฐ ํ‘œ์‹œ๋ฅผ ์ง€์›ํ•˜๋Š” ์ฐจํŠธ ์œ ํ˜•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€์˜ ๋‚ด์šฉ