Диаграмма Charts.js, накладывающаяся на диаграмму

Question

Поскольку Charts.js еще не поддерживает аннотации, я добавил аннотации точек данных после рисования диаграммы. используя ctx.fillText, как показано ниже.

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

Это отлично работает, кроме того, что теперь всплывающая подсказка показана ниже только что добавленного текста. Это не так очевидно, однако иногда оно перекрывается в плохом месте, что означает, что вы не можете увидеть всплывающую подсказку.

Есть ли способ, чтобы установить г-индекс ctx.fillText или подсказку, так что я могу слой их правильно?

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