μ΄ κ°μ΄λλ TOAST UI Chartμμ κ³΅ν΅ μ»΄ν¬λνΈλ‘ λΆλ₯λκ³ μλ μ°¨νΈ μ λͺ©, μΆ, λ²λ‘, λ΄λ³΄λ΄κΈ° λ©λ΄, ν΄ν, νλ‘―μ ν λ§λ₯Ό μ μ©νλ λ°©λ²μ λ€λ£¬λ€.
type Theme = {
chart?: ChartTheme;
title?: FontTheme;
yAxis?: AxisTheme | AxisTheme[];
xAxis?: AxisTheme;
legend?: LegendTheme;
tooltip?: TooltipTheme;
plot?: PlotTheme;
exportMenu?: ExportMenuTheme;
series?: {
// κ° μ°¨νΈμμ μ€λͺ
};
}
theme.chart
μ΅μ
μ μ°¨νΈ μ μμμ μ¬μ©ν μ€νμΌμ μ€μ ν μ μλ€. theme.chart.fontFamily
λ₯Ό μ§μ νλ©΄ μ λͺ©, μΆμ μ¬μ©λλ λΌλ²¨ ν°νΈ, μ λͺ© ν°νΈ, λ²λ‘ ν°νΈ λ±μ΄ μ΄ ν°νΈλ‘ κΈ°λ³Έ μ€μ λλ©°, theme.chart.backgroundColor
μ΅μ
μ μ¬μ©νλ©΄ μ°¨νΈμ λ°°κ²½μμ μ€μ ν μ μλ€.
- κΈ°λ³Έκ°:
'Arial'
- κΈ°λ³Έκ°:
#ffffff
type ChartTheme = {
fontFamily?: string;
backgroundColor?: string;
}
const options = {
theme: {
chart: {
fontFamily: 'Verdana',
backgroundColor: 'rgba(9, 206, 115, 0.1)',
}
}
};
theme.title
μ μ°¨νΈ μ λͺ©μ μ€νμΌμ μ€μ νλ€.
type FontTheme = {
fontSize?: number;
fontFamily?: string;
fontWeight?: string | number;
color?: string;
};
μ΄λ¦ | νμ | μ€λͺ |
---|---|---|
fontSize |
number | κΈμ ν¬κΈ° |
fontFamily |
string | ν°νΈλͺ |
fontWeight |
number | string | κΈμ κ΅΅κΈ° |
color |
string | κΈμ μμ |
const options = {
theme: {
title: {
fontFamily: 'Comic Sans MS',
fontSize: 45,
fontWeight: 100,
color: '#ff416d'
}
}
};
theme.xAxis
λλ theme.yAxis
λ μΆμ μ€νμΌμ μ€μ νλ€. μΆμ μ λͺ©, λΌλ²¨, μ μ μ€νμΌμ λ³κ²½ν μ μλ€.
type AxisTheme = {
title?: {
fontSize?: number;
fontFamily?: string;
fontWeight?: string | number;
color?: string;
};
label?: {
fontSize?: number;
fontFamily?: string;
fontWeight?: string | number;
color?: string;
};
width?: number;
color?: string;
};
type XAxisTheme = AxisTheme;
type YAxisTheme = AxisTheme | AxisTheme[];
μ΄λ¦ | νμ | μ€λͺ |
---|---|---|
title |
object | μΆ μ λͺ©μ λν μ€νμΌ μ€μ |
label |
object | μΆ λΌλ²¨μ λν μ€νμΌ μ€μ |
width |
number | μΆμ μ λκ» |
color |
string | μΆμ μ μμ |
const options = {
theme: {
xAxis: {
title: {
fontFamily: 'Impact',
fontSize: 15,
fontWeight: 400,
color: '#ff416d'
},
label: {
fontFamily: 'fantasy',
fontSize: 11,
fontWeight: 700,
color: '#6EB5FF'
},
width: 2,
color: '#6655EE'
},
yAxis: [
{
title: {
fontFamily: 'Impact',
fontSize: 17,
fontWeight: 400,
color: '#03C03C'
},
label: {
fontFamily: 'cursive',
fontSize: 11,
fontWeight: 700,
color: '#6655EE'
},
width: 3,
color: '#88ddEE'
},
{
title: {
fontFamily: 'Comic Sans MS',
fontSize: 13,
fontWeight: 600,
color: '#00a9ff'
},
label: {
fontFamily: 'cursive',
fontSize: 11,
fontWeight: 700,
color: '#FFABAB'
},
width: 3,
color: '#AFFCCA'
}
]
}
};
theme.legend
λ λ²λ‘μ νμλλ κΈμμ μ€νμΌμ μ§μ νλ€.
type LegendTheme = {
label?: {
fontSize?: number;
fontFamily?: string;
fontWeight?: string | number;
color?: string;
};
};
const options = {
theme: {
legend: {
label: {
fontFamily: 'cursive',
fontSize: 15,
fontWeight: 700,
color: '#ff416d'
}
}
}
};
theme.tooltip
μ ν΄νμ μ€νμΌμ μ€μ νλ€.
type TooltipTheme = {
background?: string;
borderColor?: string;
borderWidth?: number;
borderStyle?: string;
borderRadius?: number;
header?: {
fontSize?: number;
fontFamily?: string;
fontWeight?: string | number;
color?: string;
};
body?: {
fontSize?: number;
fontFamily?: string;
fontWeight?: string | number;
color?: string;
};
};
μ΄λ¦ | νμ | μ€λͺ |
---|---|---|
background |
string | λ°°κ²½ μμ |
borderColor |
string | ν λ리 μ μμ |
borderWidth |
number | ν λ리 μ λλΉ |
borderStyle |
string | ν λ리 μ μ€νμΌ. μ¬μ© κ°λ₯ν μ΅μ μ MDN λ§ν¬μμ νμΈν μ μλ€. |
borderRadius |
number | λ₯κ·Ό λͺ¨μ리 κ° |
header |
object | ν΄ν header μμμ κΈμ μ€νμΌ |
body |
object | ν΄ν body μμμ κΈμ μ€νμΌ |
const options = {
theme: {
tooltip: {
background: '#80CEE1',
borderColor: '#3065AC',
borderWidth: 10,
borderRadius: 20,
borderStyle: 'double',
header: {
fontSize: 15,
fontWeight: 700,
color: '#333333',
fontFamily: 'monospace',
},
body: {
fontSize: 11,
fontWeight: 700,
color: '#a66033',
fontFamily: 'monospace',
}
}
}
};
theme.plot
μ νλ‘―μ λ°°κ²½κ³Ό μ μ€νμΌμ μ€μ νλ€.
type PlotTheme = {
lineColor?: string;
lineWidth?: number;
dashSegments?: number[];
backgroundColor?: string;
vertical?: {
lineColor?: string;
lineWidth?: number;
dashSegments?: number[];
};
horizontal?: {
lineColor?: string;
lineWidth?: number;
dashSegments?: number[];
};
};
μ΄λ¦ | νμ | μ€λͺ |
---|---|---|
lineColor |
string | μ μμ |
lineWidth |
number | μ λκ» |
dashSegments |
number[] | νλ‘― μ μ dashSegment κ° (IE11 μ΄μ μ§μ) |
backgroundColor |
string | νλ‘― μμ λ°°κ²½μ |
vertical |
object | μΈλ‘λ‘ κ·Έλ €μ§λ νλ‘― μ μ μ€νμΌ μ€μ |
horizontal |
object | κ°λ‘λ‘ κ·Έλ €μ§λ νλ‘― μ μ μ€νμΌ μ€μ |
const options = {
theme: {
plot: {
vertical: {
lineColor: 'rgba(60, 80, 180, 0.3)',
lineWidth: 5,
dashSegments: [5, 20],
},
horizontal: {
lineColor: 'rgba(0, 0, 0, 0)',
},
backgroundColor: 'rgba(60, 80, 180, 0.1)'
}
}
};
theme.exportMenu
λ λ΄λ³΄λ΄κΈ° λ²νΌκ³Ό λ©λ΄ λ°μ€μ λν μ€νμΌμ μ€μ νλ€.
type ExportMenuTheme = {
button?: {
backgroundColor?: string;
borderRadius?: number;
borderWidth?: number;
borderColor?: string;
xIcon?: {
color?: string;
lineWidth?: number;
};
dotIcon?: {
color?: string;
width?: number;
height?: number;
gap?: number;
};
};
panel?: {
borderRadius?: number;
borderWidth?: number;
borderColor?: string;
header?: {
fontSize?: number;
fontFamily?: string;
fontWeight?: string | number;
color?: string;
backgroundColor?: string;
};
body?: {
fontSize?: number;
fontFamily?: string;
fontWeight?: string | number;
color?: string;
backgroundColor?: string;
};
};
};
μ΄λ¦ | νμ | μ€λͺ |
---|---|---|
button |
object | λ΄λ³΄λ΄κΈ° λ²νΌ μ€νμΌ μ€μ |
button.backgroundColor |
string | λ²νΌμ λ°°κ²½μ |
button.borderRadius |
number | λ²νΌ λ₯κ·Ό λͺ¨μ리 κ° |
button.borderWidth |
number | λ²νΌ ν λ리 λκ» |
button.borderColor |
string | λ²νΌ ν λ리 μμ |
button.xIcon |
object | X μμ΄μ½ μ€νμΌ μ€μ |
button.dotIcon |
object | μ μμ΄μ½ μ€νμΌ μ€μ |
panel |
object | λ΄λ³΄λ΄κΈ° λ²νΌ ν΄λ¦ μ λνλλ λ©λ΄ ν¨λ μ€νμΌ μ€μ |
panel.borderRadius |
number | λ©λ΄ ν¨λμ λ₯κ·Ό λͺ¨μ리 κ° |
panel.borderWidth |
number | λ©λ΄ ν¨λμ ν λ리 λκ» |
panel.borderColor |
string | λ©λ΄ ν¨λμ ν λ리 μμ |
panel.header |
object | λ©λ΄ ν¨λμ header μ€νμΌ μ€μ |
panel.body |
object | λ©λ΄ ν¨λμ body μ€νμΌ μ€μ |
const options = {
theme: {
exportMenu: {
button: {
backgroundColor: '#ff0000',
borderRadius: 5,
borderWidth: 2,
borderColor: '#000000',
xIcon: {
color: '#ffffff',
lineWidth: 3,
},
dotIcon: {
color: '#ffffff',
width: 10,
height: 3,
gap: 1,
},
},
panel: {
borderColor: '#ff0000',
borderWidth: 2,
borderRadius: 10,
header: {
fontSize: 15,
fontFamily: 'fantasy',
color: '#ffeb3b',
fontWeight: 700,
backgroundColor: '#673ab7',
},
body: {
fontSize: 12,
fontFamily: 'fantasy',
color: '#ff0000',
fontWeight: '500',
backgroundColor: '#000000',
},
},
},
},
};
ν΄λ¦ μ | ν΄λ¦ ν |
---|---|