본문 바로가기

하이차트

[HighChart]Stack차트 살펴보기 먼저 Stack차트의 예제로 한번 살펴보겠습니다. 코드는 다음과 같습니다. Highcharts.chart('container', { chart: { type: 'area' }, title: { text: 'Historic and Estimated Worldwide Population Growth by Region' }, subtitle: { text: 'Source: Wikipedia.org' }, xAxis: { categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'], tickmarkPlacement: 'on', title: { enabled: false } }, yAxis: { title: { text: 'Billions' }, la.. 더보기
[Highchart]Legend(범례), jsp에서 button으로 만들기 오늘은 Legend(범례)를 jsp에서 button을 생성하여 차트 show hide 방법을 알려드리겠습니다. 기존 Highchart에 Legend옵션을 enabled:true로 하시면(※ Default값이 true입니다.) 위 이미지에 나온것 처럼 하단에 각 Series의 color로 Legend가 표현이 되는데요. 이러한 형태가 아닌 따로 Customizing을 하고 싶으신 분들은 아래 방법을 따라하시면 될 것 같습니다. 먼저 하이차트 옵션을 쭉쭉 작성해줍니다. 맨 마지막옵션 작성이 끝나는 시점에 . . ., series: [{ id:'showHide', //html에서 button에 선언할 data-id와 동일한 값 name: 'Tokyo', data: [a,b,c,d] }] // 여기까지 하이차트.. 더보기
[Highchart]Highchart를 사용하기 위한 준비 시작에 앞서 하이차트라는 프로그램은 chart.js파일이 필수적으로 필요하기 때문에 프로그램을 다운받아서 필요한 소스를 챙겨줍니다. 더하여 하이차트는 반응형웹에 적용하기 쉽게 되어있습니다. 즉, 모바일웹에서도 구현이 가능합니다. 이점 참고 해 주시기 바랍니다. 먼저 하이차트 프로그램을 다운 받아줍니다. 하이차트 사이트에 와서 'Try for Free' 버튼을 클릭 해 줍니다. 밑으로 내리면 이런 카드가 보일텐데 Highcharts 9.3.2 버전을 다운받아준다. 따로 win, mac, linux 버전은 없는 것 같다. 참고로 난 windows10 오프라인 환경에서 개발했다. 압축을 풀고 폴더를 열어보면 'examples'라는 폴더가 있을것이다. 그곳에 많은 Type의 차트가 있지만 언제 그걸 다 뒤져보고.. 더보기

티스토리툴바