Charts.js Tooltip überlappenden Text auf Diagramm

Question

Da Charts.js Anmerkungen noch nicht unterstützt, habe ich Anmerkungen der Datenpunkte hinzugefügt, nachdem das Diagramm gezeichnet wird. mit ctx.fillText wie unten gezeigt.

 animation: { 
      animateScale: true, 
      animateRotate: true, 
      onComplete: function() { 
       var chartInstance = this.chart, 
        ctx = chartInstance.ctx; 
       ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily); 
       ctx.textAlign = 'center'; 
       ctx.fillStyle = this.chart.config.options.defaultFontColor; 
       ctx.textBaseline = 'bottom'; 

       this.data.datasets.forEach(function (dataset, i) { 
        var meta = chartInstance.controller.getDatasetMeta(i); 
        meta.data.forEach(function (bar, index) { 
         data = dataset.data[index]; 
         ctx.fillText(data, bar._model.x, bar._model.y - 5); 
        }); 
       }); 
      } 
     } 

Das funktioniert gut, abgesehen davon, dass jetzt der Tooltip unter dem neu hinzugefügten Text angezeigt wird. Dies ist nicht so offensichtlich, jedoch überlappt es manchmal an einem schlechten Ort, was bedeutet, dass Sie den Tooltipp nicht sehen können.

Gibt es einen Weg, um den Z-Index des ctx.fillText oder Tooltip zu setzen, so kann ich sie richtig Schicht?

Answer 1

Für alle Interessierten habe ich das herausgefunden. Ich habe die Tooltip-Zeichenfunktionen in der Datei charts.js betrachtet und eine modifizierte Version als benutzerdefinierten Tooltip verwendet, um den Tooltip nach dem Hinzufügen der Anmerkungen zu zeichnen.

Zuerst fügen Sie diese zu Ihrer opptions

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

Diese ruft dann die benutzerdefinierte Tooltip unten Funktion.

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); 
};