728x90
반응형
ECharts에서 label위치를 조정하려면 series옵션 label에서 position속성을 설정하면 됩니다.
position값에 따라 슬라이더가 내부, 외부 또는 시작/끝 위치에 배치됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts Horizontal Bar Chart</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<style>
#main {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="main"></div>
<script>
// DOM 요소를 선택하여 ECharts 인스턴스를 초기화
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
// 차트 옵션 설정
var option = {
title: {
text: '가로 막대 차트 (Label 위치 조정)',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2023', '2024'],
top: '10%'
},
grid: {
left: '10%',
right: '10%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['1월', '2월', '3월', '4월', '5월', '6월'],
inverse: true
},
series: [
{
name: '2023',
type: 'bar',
data: [120, 200, 150, 80, 70, 110],
itemStyle: {
color: '#5470C6'
},
label: {
show: true, // 레이블 표시
position: 'inside', // 레이블 위치 (막대 안쪽)
formatter: '{c}', // 레이블에 표시될 값 (데이터 값)
color: '#fff' // 레이블 글자 색상
}
},
{
name: '2024',
type: 'bar',
data: [90, 160, 200, 130, 150, 190],
itemStyle: {
color: '#91CC75'
},
label: {
show: true, // 레이블 표시
position: 'right', // 레이블 위치 (막대 오른쪽)
formatter: '{c}', // 레이블에 표시될 값
color: '#333' // 레이블 글자 색상
}
}
]
};
// 옵션을 차트에 적용
myChart.setOption(option);
</script>
</body>
</html>
position 옵션 종류
Followings are the options:
- [x, y]
// Absolute pixel values position: [10, 10], // Relative percentage position: ['50%', '50%']- Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
- 'top'
- 'left'
- 'right'
- 'bottom'
- 'inside'
- 'insideLeft'
- 'insideRight'
- 'insideTop'
- 'insideBottom'
- 'insideTopLeft'
- 'insideBottomLeft'
- 'insideTopRight'
- 'insideBottomRight'
728x90
반응형
'Front > JS & jQuery' 카테고리의 다른 글
| [js][Echarts] label 위치 세부 수정 / offset (0) | 2025.01.29 |
|---|---|
| [js][Echarts] 가로 bar 차트에서 y 축 데이터 순서 변경하는 법 (0) | 2025.01.27 |
| [JAVA] Stream은 순서를 지키지 않나요 ? (0) | 2025.01.22 |
| [jQuery] 문자열 합치기 (0) | 2025.01.18 |
| [js] .find() (0) | 2025.01.17 |