Just Do It/Echarts (5) 썸네일형 리스트형 Echarts.js Theme Builder 이번에는 Theme Builder라는 색상 변경 및 css를 조정할 수 있는 아주 유용한 기능을 살펴 보도록 하겠습니다!! 테마 설정은 색상 스타일을 변경하는 가장 간단한 방법입니다. 예를 들어 예제 페이지에서 dark mode로 전환하고 다른 테마의 결과를 볼 수 있습니다. dark mode로 전환한 후 Option Preview에 들어가 보면, darkMode: true로 변경되어 있고 사용된 color array까지 모두 확인할 수 있습니다. 다른 테마는 기본적으로 포함되어 있지 않으며 사용하려면 직접 다운로드해야 합니다. 테마는 theme builder에서 방문 및 다운로드할 수 있습니다. 테마를 만들거나 편집할 수도 있습니다. default Theme 중 하나를 선택하면 이미 만들어진 조합들을 .. Echarts DataZoom DataZoom 종류 dataZoomInside 데이터 확대/축소 기능이 좌표계 내부에 내장되어 있어 사용자가 마우스 드래그, 마우스 이동 또는 손가락 터치(터치 스크린에서)를 통해 좌표계를 확대/축소하거나 로밍할 수 있습니다. dataZoomSlider 마우스 드래그 또는 손가락 터치(터치 스크린에서)로 좌표계를 확대하거나 로밍할 수 있는 특수 슬라이더 막대가 제공됩니다. dataZoomSelect 확대/축소 또는 로밍 좌표계를 위한 maquee tool이 제공됩니다. toolbox에서만 구성할 수 있는 datazoom입니다. Echarts container/size 조절 Initialization HTML에서 상위 컨테이너 정의 일반적으로 노드를 정의하고 CSS를 사용하여 너비와 높이를 변경해야 합니다. 초기화하는 동안 차트를 노드로 가져옵니다. opts.width 또는 opts.height를 선언하지 않으면 차트 크기가 기본적으로 노드 크기로 설정됩니다. echarts.init를 호출하기 전에 컨테이너에 너비와 높이가 이미 있는지 확인해야 합니다. 차트 크기 지정 컨테이너의 높이와 너비가 존재하지 않거나 차트 크기가 컨테이너와 같지 않은 경우 처음부터 크기를 초기화할 수 있습니다. Reactive of the Container Size 컨테이너 크기로 차트 크기 변경 컨테이너의 크기가 변경될 때 차트 크기도 적절하게 변경하고자 합니다. 예를 들어 컨테이너의 높이는 40.. Echarts 그리기 Including ECharts echarts.js를 저장한 디렉토리에 다음 내용으로 새 index.html 파일을 만듭니다. CDN GitHub 그냥 차트를 삽입하고 싶으면 이 구조를 그대로 갖다 놓고 옵션만 변경해서 사용하시면 편합니다. id가 main인 태그로 그래프가 그려질 캔버스를 만든다. js 부분에서 myChart에 초기화된 echart 인스턴스를 만들어 option을 설정하고 setOption으로 차트를 그려낸다. 뭐 요정도로 이해하시면 될 것 같습니다. Examples 수많은 Examples 중에 마음에 드는 그래프를 하나 골라 연습해 봅니다. 위의 코드로 index.html을 작성하고 option만 변경해 주면 됩니다. 그래프를 클릭하면 이런 화면이 나오고 바로 option edit이 .. ECharts.js 소개 및 설치 Introduction Apache ECharts는 직관적이고 대화형이며 사용자 정의가 가능한 차트를 상용 제품에 쉽게 추가할 수 있는 강력한 무료 차트 및 시각화 라이브러리입니다. 순수 JavaScript로 작성되었으며 완전히 새로운 경량 캔버스 라이브러리인 zrender를 기반으로 합니다. 여러 차트 라이브러리들 중 Echarts를 사용하기로 한 이유는 수많은 직관적인 sample에 홀렸기 때문입니다. 기본적인 line, bar 차트부터 3D까지 구현되어 있고, 바로 코드를 편집해 볼 수도 있죠. 직접 써보니 정말 다양한 기능과 디자인을 적용할 수 있어 좋았습니다. 제가 사용해 본 건 chart.js 뿐이니 정확한 비교는 되지 않겠지만 적어도 Zoom 기능은 Echarts가 더 뛰어나다고 자부합니다... 이전 1 다음
