React amchart 를 하면서~!

버전은 amchart5 로 진행 했다. 

많이 쓰는 라이브러리인 만큼 미리 정리를 해두어서 추후에는 같은걸 검색하면서 시간낭비를 하지 않도록 하나씩 나올때마다 정리를 해두어야 겠다. 

 

1. axis의 x, y 컬럼사이즈 조정

데이터는 4개인데, 화면사이즈가 작다보니 amchart에서 자동으로 2개만 label 을 표시하는 현상이 있었다. 

 

예시 화면

그래서 x의 사이즈를 줄이거나 해주는 옵션이 있을꺼 같아서 열심히 width나 min, max 를 열심히 찾아보았는데, 

정답은 render를 할때 최소 grid distance 값을 조정해주면 되었다~ 😥

x뿐만아니라 y의 값을 조정하고 싶으면 마찬가지로 y의 데이터를 만들때 같은 옵션값을 넣어주면 된다~

let xAxis = chart.xAxes.push(
    am5xy.CategoryAxis.new(root, {
        renderer: am5xy.AxisRendererX.new(root, {
            minGridDistance: 25, // <- 25면 100/25 의 값만큼 보여준다.(즉, 25면 총 4개)
        }),
        categoryField: "name",
    })
);

 

2. label의 사이즈조정, 높이 조정

사이즈의 경우 theme을 따로 적용 시켰는데, theme을 따로 적용 하지 않고 바로 옵션을 적용 할 수 있는 방법이 있는지는 모르겠다. theme을 적용시키려면, 불러온 am5에서 Theme을 따로 불러와 변수에 선언하고 그안에서 조정하고자 하는 값을 set을 통해 적용 시켜주면 된다. 

(참조: https://www.amcharts.com/docs/v5/concepts/themes/ )

let myTheme = am5.Theme.new(root); // theme 선언
myTheme.rule("Label").set("fontSize", "0.8em"); // label 폰트 크기 조정

axis X의 label 이 너무 붙어있어서 아래로 좀 띄고 싶었는데, 

이때는 별도 theme적용 없이 바로 labels에 접근하여 setting을 해주었다. 

xAxis.get("renderer").labels.template.setAll({
    paddingTop: 20
});

결과 이미지

이렇게 해서 원하는 모양의 차트를 만들 수 있었다. 

리액트에서 차트를 적용하는 부분은 따로 정리해서 나중에 포스팅 해볼까 한다~ 

---

일부 내용을 더 추가 하려고 한다. 

차트를 클릭했을때 동작하는 모션을 없애고자 찾아봤다. 

ref: https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/pie-series/

 

Disabling pull-out 부분을 보면 되는데, 

toggleKey값을 none으로 바꿔주면 된다. (기본은 true 설정 되어있다.)

series.slices.template.set("toggleKey", "none");

그리고 클릭시 pull-out되는 사이즈를 조정하고 싶다면 

pieSeries.slices.template.states.create("active", {
	shiftRadius: 10, // <- 기본이 20정도인것같다. 
});

다음과 같이 조정하면 된다.