본문 바로가기
study/javascript & library

[chart/highChart] 투명 처리 혹은 지우기

by 휘루걸음 2012. 9. 20.
728x90
반응형

#배경 투명 처리

1. 배경색상

option: chart --> 배경색상 속성을 null로 설정할 경우 색상이 사라진다. - 단순하게 그려지는 영역의 fill을 지웠더니 검정색이 나오길래 검색질함.

chart:{

...

 

     backgroundColor: null

}

 

 

2. 라인

.highcharts-grid path{display:none;}/*y축 비례 가변 라인*/

#highcharts-0 svg path{display:none;}/*x축 label 상단 라인*/

 

 

출처 : http://dotnethighcharts.codeplex.com/discussions/352566

 

 

Highcharts는 JavaScript로 작성된 인터랙티브한 차트를 생성하기 위한 강력한 라이브러리 중 하나입니다. 웹 애플리케이션에서 데이터를 시각적으로 표현하기 위한 다양한 종류의 차트를 생성할 수 있습니다. Highcharts는 사용하기 쉽고 커스터마이즈하기 쉬운 API를 제공하여 다양한 종류의 차트를 빠르게 구축할 수 있습니다.

주요 기능과 특징:

  1. 다양한 차트 유형: Highcharts는 선 그래프, 막대 그래프, 파이 차트, 영역 차트, 버블 차트 등 다양한 차트 유형을 지원합니다.
  2. 인터랙티브한 기능: 사용자가 차트를 확대하거나 축소할 수 있는 기능, 데이터 포인트에 대한 툴팁 표시, 클릭 및 드래그 등 다양한 인터랙티브한 기능을 제공합니다.
  3. 레스폰시브 디자인: 차트를 화면 크기에 맞춰 자동으로 조정하여 모바일 기기 및 데스크톱에서 모두 잘 작동합니다.
  4. 다양한 커스터마이제이션 옵션: 차트의 스타일, 색상, 레이아웃 등을 사용자 정의할 수 있습니다.
  5. 크로스 브라우징 지원: 주요 웹 브라우저를 지원하며, 호환성 문제가 거의 없습니다.

Highcharts는 유료 라이센스로도 제공되지만, 개인 또는 비상업적인 용도로는 무료로 사용할 수 있습니다. 또한 Highcharts를 React, Vue 등의 다른 프레임워크와 함께 사용할 수 있는 래퍼 라이브러리도 제공됩니다.

간단한 Highcharts 예시:

htmlCopy code
<!DOCTYPE html> <html> <head> <title>My Chart</title> <script src="https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container" style="width: 600px; height: 400px;"></div> <script> // 데이터 정의 var data = [5, 10, 15, 20, 25]; // 차트 생성 Highcharts.chart('container', { chart: { type: 'bar' // 막대 그래프 }, title: { text: 'My Chart' }, series: [{ data: data }] }); </script> </body> </html>

위 예시는 5개의 데이터를 가진 간단한 막대 그래프를 생성하는 Highcharts의 사용 예시입니다. Highcharts.chart 함수를 사용하여 차트를 생성하고, series 속성에 데이터를 전달합니다.

Highcharts는 다양한 기능과 확장성을 제공하며, 자세한 내용은 Highcharts 공식 문서에서 확인할 수 있습니다.

 

 

www.highcharts.com/

 

Interactive charting library | Highcharts

We make it easy for developers to create charts and dashboards for web and mobile platforms. For Javascript, Angular, React, VueJS, iOS, R, .NET, Python, and more.

www.highcharts.com

 

728x90
반응형

'study > javascript & library' 카테고리의 다른 글

글자 길이 계산, 자르기  (0) 2015.10.24
[chart/highchart] pie slice  (0) 2012.10.08
ajax 요청인지 판단  (0) 2012.09.27
encode,decode  (0) 2012.09.20
date_format(date,format)  (0) 2012.04.30