[javascript] amchart 4 스크롤링 구현 & bullet에 base64로 이미지 추가

chart 내부에 스크롤링이 필요하여 검색하고 이것저것 응용한 결과

 

기존 샘플 코드

https://www.amcharts.com/demos/line-chart-with-scroll-and-zoom/#code

Line Chart with Scroll and Zoom - amCharts

기존 샘플코드에 일부 코드를 추가하여 scrollbar를 커스터마이징한 코드

https://codepen.io/koponyang/pen/ExKxZKM

Line Chart with Scroll and Zoom

 

...
//수치 간격
valueAxis.renderer.minGridDistance = 100;
//최대값, 최소값을 정해서 스크롤 시에 animation이 일어나지 않도록함
valueAxis.max = 1300;
valueAxis.min = 1000;
...
/*
 * am4chart.XYScrollbar()는 데이터 미리보기느낌의 스크롤바인듯하여 브라우저의 스크롤바 느낌을 내기 위해 
 * am4core.Scrollbar()를 이용하였다
*/
//스크롤바 사용시 노출되는 zoomOutButton 비노출처리
chart.zoomOutButton.disabled = true;
chart.scrollbarX = new am4core.Scrollbar();
//default는 top이어서 하단에 두기 위한 설정
chart.scrollbarX.parent = chart.bottomAxesContainer;
chart.scrollbarX.start = 0;
//end의 기본값은 1인데 0.5로 변경
chart.scrollbarX.end = 0.5;
//마우스휠 이벤트지정, default "none"
chart.mouseWheelBehavior  = "panX";
//마우스 감도 조절, 0에 가까울수록 스크롤바가 적게 움직임
chart.plotContainer.mouseOptions.sensitivity = 1;
//startGrip, endGrip 버튼 설정
var sgrip = chart.scrollbarX.startGrip;
var egrip = chart.scrollbarX.endGrip;
//스크롤바처럼 범위 조절 불가하도록 disabled 처리
sgrip.icon.disabled = true;
sgrip.background.disabled = true;
egrip.icon.disabled = true;
egrip.background.disabled = true;

...

 

 

그래프에 사진이 들어가야하는 이슈가 있는데

LDAP에서 가져오는 이미지라 base64코드로 들어가야 해서 기존 샘플 소스들을 이용해서 커스텀해보았다

 

참고 샘플소스

https://www.amcharts.com/demos/column-chart-images-top/

Column chart with images on top - amCharts

https://codepen.io/team/amcharts/pen/GdyEjM

amCharts V4: Column chart with images as bullets

해서, 완성된 코드

https://codepen.io/koponyang/pen/abNbJVp

Column chart with images on top

//수정된 부분
...
// Add bullets
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.radius = 30;
bullet.valign = "bottom";
bullet.align = "center";
bullet.isMeasured = true;
bullet.mouseEnabled = false;
bullet.verticalCenter = "bottom";

var outlineCircle = bullet.createChild(am4core.Circle);
outlineCircle.adapter.add("radius", function (radius, target) {
    var circleBullet = target.parent;
    return circleBullet.circle.pixelRadius + 5;
})

var image = bullet.createChild(am4core.Image);
image.width = 60;
image.height = 60;
image.horizontalCenter = "middle";
image.verticalCenter = "middle";
image.propertyFields.href = "bullet";

image.adapter.add("mask", function (mask, target) {
    var circleBullet = target.parent;
    return circleBullet.circle;
})
...

 

radius를 안넣으면 기본 square형식으로 사진이 들어가서 별로 안예뻐서 라운드타입의 이미지 샘플을 찾았고

테두리가 없으면 사진 배경이 하얀색이라 묻혀버리기때문에 테두리도 추가했다 'ㅁ'!!

맘에 쏙드네