[amCharts.js] 커서 툴팁 구현

amCharts.js

1. amCharts 라이브러리 및 jQuery 라이브러리를 로드합니다.

<!-- amCharts 라이브러리 로드 -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- jQuery 라이브러리 로드 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

 

2. amCharts 차트를 생성합니다.

// 차트 생성
var chart = am4core.create("chartdiv", am4charts.XYChart);

// 차트 데이터 설정
chart.data = [{
  "date": "2021-01-01",
  "value": 10
}, {
  "date": "2021-01-02",
  "value": 20
}, {
  "date": "2021-01-03",
  "value": 15
}, {
  "date": "2021-01-04",
  "value": 25
}, {
  "date": "2021-01-05",
  "value": 18
}];

// 차트 축 설정
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// 차트 시리즈 설정
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}";

// 커서 설정
chart.cursor = new am4charts.XYCursor();
chart.cursor.lineY.opacity = 0;
chart.cursor.lineX.strokeOpacity = 0.5;
chart.cursor.lineX.strokeDasharray = "2,2";
chart.cursor.behavior = "panX";

// 차트 스크롤바 설정
chart.scrollbarX = new am4core.Scrollbar();

반응형

3. 커서 툴팁을 구현합니다.

// 커서 이벤트 리스너 등록
chart.cursor.events.on("cursorpositionchanged", function(event) {
  // 커서 위치에서 가장 가까운 데이터 항목 검색
  var dataItem = series.tooltipDataItem(
    series.getClosestDataItemIndex(
      chart.getXY(event.pointer.x, event.pointer.y),
      "x"
    )
  );

  // 데이터 항목이 있으면 툴팁을 표시합니다.
  if (dataItem) {
    var tooltipText = dataItem.tooltipText;
    chart.tooltip.show(tooltipText, event.pointer.x, event.pointer.y);
  } else {
    chart.tooltip.hide();
  }
});

// 차트 툴팁 설정
chart.tooltip = new am4core.Tooltip();
chart.tooltip.background.fill = am4core.color("#000");
chart.tooltip.background.strokeWidth = 0;
chart.tooltip.fontSize = 14;
chart.tooltip.getFillFromObject = false;
chart.tooltip.getStrokeFromObject = false;
chart.tooltip.pointerOrientation = "down";
chart.tooltip.label.minWidth = 40;
chart.tooltip.label.minHeight = 40;
chart.tooltip.label.textAlign = "middle";

 

4. CSS 스타일을 적용합니다.

/* 차트 컨테이너 스타일 */
#chartdiv {
  width: 100%;
  height: 500px;
  position: relative;
}

/* 차트 툴팁 스타일 */
.amcharts-tooltip {
  font-family: Arial, sans-serif;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

 

5. 마무리

이제 차트를 브라우저에서 렌더링하면 마우스 커서를 움직일 때 해당 위치의 데이터 항목에 대한 툴팁이 표시됩니다. 이 방법을 확장하여 커스텀 툴팁 스타일을 적용하거나, 다른 이벤트를 추가하여 더욱 다양한 상호작용을 구현할 수 있습니다.