난 즐거워... 개발이...

heatmap, line chart 등 다양한 chart를 만들고 난 뒤 해당 chart의 특정 point, cell 등을 click하여 현재 본인이 선택한 state를 얻고 싶을 때가 있다. ex ) line chart에서 내가 click 한 특정 point 강조하기, heatmap의 click한 cell 하나 강조하기 ... React + Typescript 환경에서의 코드이다. const [nowIndex, setNowIndex] = useState(undefined); useEffect(() => { if (chartRef.current) { const chart = echarts.init(chartRef.current); // 정해진 option이 있다고 가정한다. chart.setOption(..

chart를 만들었는데, 모니터 크기나 브라우저 크기에 맞지 않을 때가 있다. 이어지는 내용에선 위와 같은 경우에 chart크기를 자동으로 조정하는 방법을 서술한다. React + Typescript 환경에서의 코드이다. useEffect(() => { if (chartRef.current) { const chart = echarts.init(chartRef.current); // option은 따로 지정해뒀다고 가정한다. chart.setOption(option); // 크기가 변경될 경우 chart가 resize되는 function을 만든다. window.onresize = function () { chart.resize(); }; // 창 크기 조절 이벤트 리스너 등록 window.addEventL..

Line chart 같은 걸 그리다 보면 특정한 symbol 과 같이 원하는 데이터만 chart UI를 변경해야 하는 경우가 생긴다. React + Typescript 에서 해당 경우를 처리하는 방법이다. // data에서 내가 강조하고 싶은 point의 index const nowIndex = 0 // chart option의 series를 예로 든다. series: [ { name: "Line Chart", type: "line", data: props.data, symbolSize: function (value: number, params: any) { // 클릭한 데이터의 심볼 크기 설정 // 강조하고 싶은 index랑 동일하다면 10으로 기존 크기 6보다 좀 더 크게 return params.d..

Heatmap, Line Chart를 만들어보면서 주로 사용했던 options 정리 추후에 새롭게 사용되는 요소들은 그때마다 추가 할 예정 formatter - 해당 option은 어디서든 공통으로 사용됨 tooltip, legend, UI color 등 다양한 곳에서 활용할 수 있음 위의 요소들이 UI상으로 표기되는 방식을 원하는 모습으로 변경함 return은 문자열로 하되, 해당 문자열 구성자체에 html 태그를 넣어서 구성하면, 태그가 적용된 채로 UI가 구성됨 return `formatter test` tooltip mouse를 hover했을 때 나오는 tooltip trigger tooltip이 무엇에 의해 trigger 될 지 정함 보통 axes를 이용해 축에 의해 tirgger 되는 방식을 ..