[amchart] y축 그리드 커스텀 설정, 옵션 (valueAxis 설정)

y축 그리드 커스텀 설정, 옵션 (valueAxis)

이 부분 설정

1. valueAxis 생성

//valueAxis 생성
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

---

2. 최대/최소 (min, max)

// 최대,최소 설정. 미설정시 주어진 데이터 범위 내에서 알아서 보기좋게 생성함
valueAxis.min = 0;
valueAxis.max = 100;

---

3. 최대/최소 (strictMinMax)

//min, max를 미설정한경우 데이터의 최소/최대값을 y축 그리드의 최소/최대값으로 지정함
//썩 보기 좋지 않다. 미설정시 기본값은 false인듯.
valueAxis.strictMinMax = true;

 

---

4. 뒤집기(inversed)

//오름차순, 내림차순 설정. 미설정시 false.
//true 설정 시 y축 그리드 위아래가 뒤집힘
valueAxis.renderer.inversed = true;

 

---

5. inside

//y축 라벨이 표 안으로 들어옴
valueAxis.renderer.inside=true;

---

6. 라벨 숨김(minLabelPosition)

//최소값 라벨 숨김 설정
//0.01 = y축 전체 길이의 1%에 해당하는 부분
valueAxis.renderer.minLabelPosition = 0.01;

---

7. 투명도(strokeOpacity)

//y축 획의 투명도
//미설정시 기본 0인듯하며 1 설정시 불투명함
valueAxis.renderer.line.strokeOpacity = 1;

 

---

8. 두께 (strokeWidth)

// y축 획의 두께
valueAxis.renderer.line.strokeWidth = 2;

---

9. 표시 위치(opposite)

//y축 획 표시 위치.
//미설정시 기본 왼쪽, true 설정시 오른쪽
valueAxis.renderer.opposite = true;

---

10. 글자 색(label fill)

//y축 라벨 글자 색 
valueAxis.renderer.labels.template.fill = "#ffa200";

 

---

11. 선 색 (line stroke)

//y축 획의 색
valueAxis.renderer.line.stroke = "#ffa200";

---

12. y축 그리드 간격 (minGridDistance)

//y축 그리드의 최소간격
valueAxis.renderer.minGridDistance = 30;

 

미설정 - 값 10 - 값 20

---

13. 범례 표시 (title)

valueAxis.title.text="percentage";

---

시리즈에 적용하기

 series.yAxis = valueAxis;

 

여러개의 시리즈를 생성할 때

여러개의 y축을 사용하고 싶은경우 

시리즈 생성할때마다 valueAxis를 생성해주면 된다