프론트린이
80
2022-01-15 13:21:37
3
71

chart.js hover or mouseenter


위 사진 처럼 도넛 빨간 선 안 레이블에 마우스를 가져다 되었을때 데이터 값이 가운데에 fillText로 보이게 하고 싶습니다.

아래 코드 처럼 했더니 보이기는 하나 activeElements.index 범위가 이상한건지 엄청나게 깜빡거리는 증상이 나타납니다 혹시 다른 이벤트나 함수 아시는분 계시나요?

onHover: (event, activeElements, chart: Chart) => {
const {ctx, chartArea: {top, right, bottom, left, width, height}} = chart;
ctx.save();
ctx.fillStyle = '#3983DC';
ctx.font = '20px arial, "Malgun Gothic", "맑은 고딕", AppleSDGothicNeo-Light, sans-serif';
ctx.textAlign = 'center';
if (activeElements.length > 0) {
if (activeElements[0].index === 0) {
ctx.fillText('' + po.nCnt, width / 2, top + (height / 1.85));
} else if (activeElements[0].index === 1) {
ctx.fillText('' + po.sCnt, width / 2, top + (height / 1.85));
} else if (activeElements[0].index === 2) {
ctx.fillText('' + po.cfaCnt, width / 2, top + (height / 1.85));
} else if (activeElements[0].index === 3) {
ctx.fillText('' + po.cfCnt, width / 2, top + (height / 1.85));
}
}
}
0
  • 답변 3

  • S_J
    232
    2022-01-15 13:35:03
    옛날부터 올리시던데 해결이 안 되신 것 같네요.
    깃 레포라도 공유해 주시면 좋을 텐데요.
  • 머티리얼유아이
    66
    2022-01-17 11:27:18

    차트안에 데이터를 넣는 부분 보여주실수있을까요 

  • 프론트린이
    80
    2022-01-17 14:44:12

    datasets: [
    {
    data: [this.qtInfo.nCnt, this.qtInfo.sCnt, this.qtInfo.rsCnt, this.qtInfo.cfaCnt, this.qtInfo.cfCnt],
    backgroundColor: ['#45AAB4', '#206491', '#FBB45C', '#F36480', '#3983DC'],
    hoverBackgroundColor: ['#45AAB4', '#206491', '#FBB45C', '#F36480', '#3983DC'],
    borderWidth: 1,
    hoverBorderWidth: 1,
    hoverBorderColor: ['#45AAB4', '#206491', '#FBB45C', '#F36480', '#3983DC'],
    hoverOffset: 1,
    }
    ]
    이렇게 데이터를 넣었습니다.
  • 로그인을 하시면 답변을 등록할 수 있습니다.