메뉴바로가기
본문바로가기
하단바로가기
맨위로가기
통합데모
바로가기
기술문의
영업문의
조달쇼핑몰 등록 제품
[구매링크]
SBChart v2
리뉴얼 사이트
바로가기
facebook
blog
softbowl
SBCHART
SBChart 가이드
SBChart 가이드
Options
API 목록
Release Note
적용예시
Examples
적용예시
구매
제품구매정보
고객사
고객지원
FAQ
기술지원/제품구입/데모문의
전체메뉴보기
닫기
SBChart 가이드
SBChart 가이드
시작하기
Getting Started
Basic Usage
Using with jQuery
Using with requireJS
차트 종류
All charts
Map
GaugeNew
ImageSingle
Treemap
Candlestick
HeartBeat(ECG)
Wing
Broken
Organization
Barrange
Heatmap
Tree
Gantt
Line
Bar
Bar (Rotated)
Spline
Step
Histogram
Area
Bubble
Combination
Stackbar
Stackbar (100%)
Stackbar (Rotated)
Stackarea
Stackarea (100%)
Scatter Plot
pie
Donut
Gauge
Radar
AreaRange
Boxplot
Plot
Wordcloud
차트 데이터
Columns Data
Rows Data
JSON Data
Options
Options
global
global.size
global.color
global.color.backgroundImage
global.padding
global.accessibility
global.pattern
global.dash
global.animation
global.export
global.onclick
global.onclickFocus
global.onclickDataAll
global.noDisplayValue
global.broken
global.milestone
global.background
data.columns
data.rows
data.json
data.keys
data.type
data.types
data.groups
data.legends
data.labels
data.x
data.xs
data.noData
data.hideLegendItems
data.useLabelMultiLine
data.labelMultiLineGap
data.datarange
axis.rotated
axis.yAxisReverse
axis.axes
axis.x
axis.x.categories
axis.x.tick
axis.x.label
axis.x.padding
axis.x.scroll
axis.x.zoom
axis.y
axis.y.tick
axis.y.label
axis.y.padding
axis.y2
axis.y2.tick
axis.y2.label
axis.y2.padding
grid
title
legend
legend.item
legend.inset
tooltip
tooltip.format
tooltip.position
tooltip.mouse
tooltip.showBackground
tooltip
extend.point
extend.bar
extend.line
extend.area
extend.pie
extend.donut
extend.gauge
extend.bubble
extend.radar
extend.heatmap
extend.histogram
extend.tree
extend.gantt
extend.barrange
extend.candlestick
extend.wing
extend.treemap
extend.imageSingle
extend.gaugeNew
extend.areaRange
extend.boxplot
extend.plot
extend.wordcloud
Map Chart Options
global.padding
global.export
data.type
data.json
data.keys
title
tooltip
tooltip.format
extend.map
extend.map
extend.map.subchart (bar&pie)
extend.map.subchart (circle)
extend.map.mapMarker
Method
Options API
render()
version
Class
classes
API 목록
Release Note
적용예시
Examples
Options
Show/Hide
Paint
Size
Color Theme
Colors Pattern
CSS Class
Accessibility Pattern
Onclick
Animation
Export To Image
Data Labels
Legend Labels
Stacked Groups
Categories
Axis Padding
Axis Min/Max
Axis Label
Axis Tick Count
Axis Tick Format
Axis Tick Values
Axis Outer Tick
Tick Rotation
Tick Rotation (Rotated)
Axis Y Zerobased
Axis X Scroll
Axis X Zoom
Legend Position
Legend Item
Title
Tooltip
Bar Options
Point
Pie/Donut/Gauge Label
Pie/Donut Arc Spacing
Donut/Gauge Radius
Donut Options
Gauge Options
Bubble Options
Radar Options
Heatmap Options
Histogram Options
Barrange Options
Candlestick Options
Broken Options
Treemap Options
ImageSingle Options
GaugeNew Options
AreaRange Options
Boxplot Options
Plot Options
Wordcloud Options
MapChart Options
Map Options
Data
Columns Data
Rows Data
JSON Data
적용예시
AI Patents
Approval rating
Coffee Production (PC)
a Lot-solid apart (PC)
Dashboard 1 (PC)
Vital Sign
Stock Price
구매
제품구매정보
고객사
고객지원
FAQ
기술지원/제품구입/데모문의
SBChart
2.0
재사용 가능하고 고품질의 HTML5 표준 JavaScript 차트 컴포넌트
HTML5 웹 표준을 준수합니다.
다양한 종류의 차트와 기능을 제공합니다.
SVG 기반으로 해상도에 구애받지 않고 화질이 저하되지 않습니다.
모든브라우저
지원
모든OS
지원
모든디바이스
지원
SBChart 기능 가이드 바로가기
HTML5 웹 표준 준수
HTML5 웹 표준, CSS3 표준 준수
웹 접근성 준수
No-plugin, N-Screen
다양한 종류의 차트와 기능
선, 막대, 영역, 스텝, 버블, 파이, 도넛, 게이지, 혼합 차트 등 지원
차트의 컬러, 축, 제목, 범례, 툴팁 등 기능 설정 지원
Array, Json 형식의 데이터 지원
개발 편의성
D3.js v4+ 기반
개발자에게 익숙한 방식의 API, 구조화된 옵션 제공
UMD 명세를 지원하여 다양한 형태의 개발 가능
국내 최고 기술 지원서비스 제공
자체 기술로 개발되어 기술지원 용이
커스터마이징 지원
방문 지원 및 유선 지원
ALL CHARTS
Map
GaugeNew
ImageSingle
Treemap
Candlestick
HeartBeat
Wing
Broken
Org
Tree
Gantt
Barrange
Heatmap
Line
Histogram
Bar
Bar (Rotated)
Spline
Step
Area
Bubble
Combination
Stackbar
Stackbar (100%)
Stackbar (Rotated)
Stackarea
Stackarea (100%)
Scatter Plot
Donut
Pie
Gauge
Radar
AreaRange
Boxplot
Plot
Wordcloud
Ontology
Matrix
Pointer
FEATURES
직관적이고 간편한 차트 구현
다양한 종류의 옵션과 CSS를 차트에 적용
SVG 기반의 차트 컴포넌트
해상도와 관계없이 고품질의 화질을 제공
개발 다양성 지원
UMD 명세를 지원하여 CommonJS, AMD 방식 모두 가능
간편한 라이브러리
간편한 라이브러리 추가, 다양한 기본 챠트 외에 맵차트까지 포함된 모든 차트 사용 가능
접근성 지원
장애인차별금지법에 부합하는 접근성(Accessibility) Pattern 지원
GETTING STARTED
Step 1. JS, CSS 파일 링크
<link rel
=
"stylesheet"
href
=
"css/sbchart.css"
/>
<script type
=
"text/javascript"
src
=
"js/sbchart.js"
/>
</script>
Step 2. 코드 추가
<div id
=
"chartWrap"
>
</div>
Step 3. 데이터와 옵션을 지정하여 차트 렌더링
sb.chart.render(
"#chartWrap"
, {
data: {
columns: [
[
"data1"
,
5, 2, 3, 4, 5, 6
],
[
"data2"
,
15, -12, 13, -14, 15, 16
],
[
"data3"
,
25, 22, 23, 24, -25, 26
],
]
}
});
고객사
공공기관
기업
금융 / 교육