FlexChart 스타일 & CSS
FlexChart는 palette 속성을 설정하여 재정의할 수 있는 기본 팔레트를 기반으로 각 계열(Series)의 색상을 자동으로 선택합니다.
Palettes 클래스를 사용하여 FlexChart, FlexPie 및 __FlexRadar__에 대해 미리 정의된 팔레트를 지정할 수 있습니다:
myChart.palette = wijmo.chart.Palettes.light;
The following palettes are pre-defined:
- standard (default)
- cocoa
- coral
- dark
- highcontrast
- light
- midnight
- modern
- organic
- slate
- zen
- cyborg
- superhero
- flatly
- darkly
- cerulan
사용자 정의 팔레트를 제공하여 이러한 색상을 사용자 정의하고 각 계열(Series)의 불투명도 수준을 수정할 수 있습니다. 차트 시리즈에 더 많은 색상이 필요한 경우 자동으로 반복됩니다.
// use colors specified by name
myChart.palette = ['red', 'green', 'blue'];
// or use colors specified as rgba-values
myChart.palette = [
'rgba(255,0,0,1)',
'rgba(255,0,0,0.8)',
'rgba(255,0,0,0.6)',
'rgba(255,0,0,0.4)'];
계열(Series) 스타일
시리즈의 style 및 symbolStyle 속성을 fill, stroke, strokeWidth 등의 SVG 스타일 속성을 지정하는 객체로 설정하여 각 계열(Series)의 기본 스타일 설정을 재정의할 수도 있습니다.
스타일 속성은 Wijmo의 모든 스타일이 CSS를 통해 수행된다는 일반적인 규칙의 예외입니다. 왜냐하면 많은 차트에 동적 계열(Series)이 있어 미리 스타일을 지정할 수 없기 때문입니다.
myChart.series[0].style = {
fill:'green',
stroke:'darkgreen',
strokeWidth: 1};
myChart.series[0].symbolStyle = {
fill:'red',
stroke:'darkred',
strokeWidth: 2};
CSS 사용
모든 Wijmo 컨트롤과 마찬가지로 FlexChart는 DOM 트리의 요소에 잘 알려진 클래스 이름을 추가합니다. 이러한 클래스 이름을 통해 각 차트 요소의 모양을 사용자 지정하는 CSS 규칙을 정의할 수 있습니다.
차트의 모양을 사용자 정의하기 위해, 스타일 지정할 요소를 살펴본 다음 해당 요소에 적용되는 몇 가지 CSS 규칙을 만듭니다.
예를 들어 Edge 또는 Chrome에서 X축에 있는 레이블 중 하나를 마우스 오른쪽 버튼으로 클릭하면 "wj-axis-x" 클래스가 있는 요소에 포함된, "wj-label" 클래스가 있는 요소임을 알 수 있습니다. 이는 "wj-flexchart" 클래스가 있는 최상위 컨트롤 요소에 포함되어 있습니다. 이 예의 첫 번째 CSS 규칙은 이 정보를 사용하여 X 레이블을 사용자 정의하는 것 입니다. 규칙 선택자(Rule Selector)는 상위 요소에 있어야 하는 추가 요청 사항인 "wj-flexchart" 및 "custom-flex-chart" 클래스를 추가합니다. 이것이 없으면 규칙이 페이지의 모든 차트에 적용됩니다.
사영자 정의 차트 테마 CSS 예시:
/* custom chart theme CSS */
.custom-chart {
background: #efefef;
background: linear-gradient(to bottom right, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
padding: 8px;
}
.custom-chart .wj-label {
font-family: Courier New, Courier, monospace;
font-weight: bold;
}
.custom-chart .wj-legend .wj-label {
font-family: Courier New, Courier, monospace;
font-weight: bold;
}
.custom-chart .wj-legend > rect {
fill: #f8f8f8;
stroke: #c0c0c0;
}
.custom-chart .wj-plot-area > rect {
fill: white;
stroke: #c0c0c0;
}
차트 div에 클래스를 설정하여 사용자 정의 테마를 설정합니다.
<div id="myChart" class="custom-chart"></div>
추가 스타일 항목
특정 차트 요소의 스타일 지정에 대한 자세한 내용은 다음 항목을 참고하시길 바랍니다: