본문 바로가기

chart

[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]Highchart를 사용해보자.(꿀팁주의) Highchart를 설치하지 않으신 분들은 하단의 링크를 참고하세요! https://i-will-develop.tistory.com/2 [Highchart]Highchart를 사용하기 위한 준비 먼저 하이차트 프로그램을 다운 받아줍니다. 하이차트 사이트에 와서 'Try for Free' 버튼을 클릭 해 줍니다. 밑으로 내리면 이런 카드가 보일텐데 Highcharts 9.3.2 버전을 다운받아준다. 따로 win, mac, li i-will-develop.tistory.com 오늘 이시간에는 Highchart의 기본적인 용어나 개발팁 등을 다뤄볼 예정입니다. 위 이미지의 차트는 하이차트의 컬럼타입 차트입니다. 독립된 컬럼별 수치 표현에 용이한 차트입니다. 코드를 보시겠습니다. 여기에 보이는 .js들은 거의 .. 더보기
[Highchart]Highchart를 사용하기 위한 준비 시작에 앞서 하이차트라는 프로그램은 chart.js파일이 필수적으로 필요하기 때문에 프로그램을 다운받아서 필요한 소스를 챙겨줍니다. 더하여 하이차트는 반응형웹에 적용하기 쉽게 되어있습니다. 즉, 모바일웹에서도 구현이 가능합니다. 이점 참고 해 주시기 바랍니다. 먼저 하이차트 프로그램을 다운 받아줍니다. 하이차트 사이트에 와서 'Try for Free' 버튼을 클릭 해 줍니다. 밑으로 내리면 이런 카드가 보일텐데 Highcharts 9.3.2 버전을 다운받아준다. 따로 win, mac, linux 버전은 없는 것 같다. 참고로 난 windows10 오프라인 환경에서 개발했다. 압축을 풀고 폴더를 열어보면 'examples'라는 폴더가 있을것이다. 그곳에 많은 Type의 차트가 있지만 언제 그걸 다 뒤져보고.. 더보기

티스토리툴바