Charts.js 차트의 텍스트 겹침

Question

Charts.js가 주석을 아직 지원하지 않기 때문에 차트를 그린 후에 데이터 포인트의 주석을 추가했습니다. 아래와 같이 ctx.fillText를 사용하십시오.

위의 코드는 새로 추가 된 텍스트 아래에 툴팁이 표시된다는 것을 제외하고는 훌륭합니다. 이것은 분명하지 않지만 때로는 나쁜 장소에 겹쳐서 툴팁을 볼 수 없다는 것을 의미합니다.

그래서 정확하게 레이어 수 ctx.fillText 또는 툴팁의 Z- 인덱스를 설정하는 방법이 있나요?

Answer 1

내가 알아 낸 점은 charts.js의 툴팁 그리기 기능을 살펴본 후 수정 된 버전을 사용자 정의 툴팁으로 사용하여 주석을 추가 한 후 툴팁을 그리는 것이 었습니다.

첫째는 opptions

config = { 
    options: { 
     tooltips: { 
      enabled: false, 
      custom: customTooltips 
     } 

이 다음 아래의 사용자 정의 툴팁 함수를 호출이 추가합니다.

var currentX = null; 
var currentY = null; 

var customTooltips = function (tooltip) { 

    var helpers = Chart.helpers; 
    var ctx = this._chart.ctx; 
    var vm = this._view; 

    if (vm == null || ctx == null || helpers == null || vm.opacity === 0) { 
     return; 
    } 

    var tooltipSize = this.getTooltipSize(vm); 

    var pt = { 
     x: vm.x, 
     y: vm.y 
    }; 

    if (currentX == vm.x && currentY == vm.y) { 
     return; 
    } 

    currentX = vm.x; 
    currentY = vm.y; 

    // IE11/Edge does not like very small opacities, so snap to 0 
    var opacity = Math.abs(vm.opacity < 1e-3) ? 0 : vm.opacity; 

    // Draw Background 
    var bgColor = helpers.color(vm.backgroundColor); 
    ctx.fillStyle = bgColor.alpha(opacity * bgColor.alpha()).rgbString(); 
    helpers.drawRoundedRectangle(ctx, pt.x, pt.y, tooltipSize.width, tooltipSize.height, vm.cornerRadius); 
    ctx.fill(); 

    // Draw Caret 
    this.drawCaret(pt, tooltipSize, opacity); 

    // Draw Title, Body, and Footer 
    pt.x += vm.xPadding; 
    pt.y += vm.yPadding; 

    // Titles 
    this.drawTitle(pt, vm, ctx, opacity); 

    // Body 
    this.drawBody(pt, vm, ctx, opacity); 

    // Footer 
    this.drawFooter(pt, vm, ctx, opacity); 
};