Just Do It (14) 썸네일형 리스트형 C# windowForm MetroFramework 적용 기본적인 윈폼 스타일은 너무 밋밋하고 심심하지만 차마 직접 디자인할 엄두는 안 나기에 바로 검색해본 winForm design😉😉 다행이도 저 같은 디자인 무지랭이를 위해 visual studio에서 적용 가능한 Framework가 있었군요!!!! 테마도 흑백 두가지로 깔끔해 보입니다ㅎㅎ 자세한 설명은 github에서 보실 수 있으니 참고해 주세요^^ 저는 Visual Studio 2022 Community 버전을 사용했으니 설치가 필요하시다면 여기서 무료로 다운받으시면 됩니다. Installation 1. 새 프로젝트 만들기 C# 기반 Windows Form을 만들어 봅니다. 2. NuGet을 이용해 MetroFramework 설치 릴리스 빌드 및 자동 업데이트를 제공하므로 NuGet을 사용하여 Met.. Echarts.js Theme Builder 이번에는 Theme Builder라는 색상 변경 및 css를 조정할 수 있는 아주 유용한 기능을 살펴 보도록 하겠습니다!! 테마 설정은 색상 스타일을 변경하는 가장 간단한 방법입니다. 예를 들어 예제 페이지에서 dark mode로 전환하고 다른 테마의 결과를 볼 수 있습니다. dark mode로 전환한 후 Option Preview에 들어가 보면, darkMode: true로 변경되어 있고 사용된 color array까지 모두 확인할 수 있습니다. 다른 테마는 기본적으로 포함되어 있지 않으며 사용하려면 직접 다운로드해야 합니다. 테마는 theme builder에서 방문 및 다운로드할 수 있습니다. 테마를 만들거나 편집할 수도 있습니다. default Theme 중 하나를 선택하면 이미 만들어진 조합들을 .. Bootstrap - free theme Atlantis 설치 free theme을 project에 적용해서 이리저리 돌려보다가 alert 라이브러리도 없고, table 기능도 기본 뿐이라 추가로 라이브러리만 다운 받아 써볼까 하다가 더 마음에 드는 free theme 발견! 😆 색상도 더 마음에 들고, 제가 필요로 했던 라이브러리들이 더 포함되어 있습니다. Datatable도 포함되어 있어 다양한 filtering도 가능합니다. 다운로드는 여기에서 가능하고 Download 버튼을 누르고 email 입력 시 다운 경로를 보내줍니다. 파일 구조는 아주 간단하게 되어 있습니다. documentation을 보면 components, plugin에 대한 설명이 나와있습니다. https://themekita.com/demo-atlantis-lite-bootstrap/live.. Bootstrap - npm 에러 해결 역시 세상에서 제일 어려운 건 설치인 것 같습니다.... 하루종일 설치 에러와 싸워서 얻어낸 정보들 공유합니다. no such file or directory, open... 순조롭게 node.js까지 다운로드를 하고 npm install을 하려 하니 오잉? 에러가 뜹니다. ENOENT: no such file or directory, open... 이 부분을 구글링 해보니 package.json이 없기 때문이라고 합니다. npm 사용 전 초기 설정이 필요하여 다시 아래의 명령을 하면 npm init 어쩌구 저쩌구 쭈욱 뜨는데 모두 enter를 눌러주고 Is this OK?( yes ) 까지 Enter를 친 후 아래의 명령을 하면 npm 설치 완료! npm install finalhandler The p.. 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 2 다음
