ChartJS工具提示位置堆积的条形图

Question

我正在创建堆积条形图。除工具提示外，其他所有操作均按预期进行。一个条形图位于另一个条形图的后面（Kinda类似于进度条），问题是，一旦一个条形图与另一条形图条的距离越来越近，工具提示就会重叠。因此，我的问题是，是否可以为每个数据（或每个条形图）设置“ yAlign”位置，以便可以在一组条形图的顶部显示工具提示，而在另一组条形图的底部显示工具提示。 >

这是我的代码：

<script>

var ctx = document.getElementById("examples").getContext('2d');


var data = {
labels:[
        "A", "B", "C",],
datasets: [{
      label: false,
      data: [40, 110,  18],

      backgroundColor: [
        'rgba(255, 99, 132, 0.7)',
        'rgba(158, 112, 225, 0.7)',
        'rgba(174, 122, 215, 0.7)',

      ]
    },


{
      label: false,
      data: [100, 200, 50],

      backgroundColor: [
        'rgb(128,128,128)',
        'rgb(128,128,128)',
        'rgb(128,128,128)',

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

        Chart.plugins.register({
            beforeRender: function (chart) {
                if (chart.config.options.showAllTooltips) {

                    // create an array of tooltips
                    // we can't use the chart tooltip because there is only one tooltip per chart
                    chart.pluginTooltips = [];
                    chart.config.data.datasets.forEach(function (dataset, i) {
                        chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                            chart.pluginTooltips.push(new Chart.Tooltip({
                                _chart: chart.chart,
                                _chartInstance: chart,
                                _data: chart.data,
                                _options: chart.options.tooltips,
                                _active: [sector]
                            }, chart));
                        });
                    });

                    // turn off normal tooltips
                    chart.options.tooltips.enabled = false;
                }
            },
            afterDraw: function (chart, easing) {
                if (chart.config.options.showAllTooltips) {
                    // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
                    if (!chart.allTooltipsOnce) {
                        if (easing !== 1)
                            return;
                        chart.allTooltipsOnce = true;
                    }

                    // turn on tooltips
                    chart.options.tooltips.enabled = true;
                    Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
            // This line checks if the item is visible to display the tooltip
            if(!tooltip._active[0].hidden){
              tooltip.initialize();
                   //           tooltip._options.position = "outer";
              //  tooltip._options.displayColors = false;
              //  tooltip._options.bodyFontSize = tooltip._chart.height*0.025;
                //tooltip._options.yPadding = tooltip._options.bodyFontSize*0.30;
               // tooltip._options.xPadding = tooltip._options.bodyFontSize*0.30;
                //tooltip._options.caretSize = tooltip._options.bodyFontSize*0.5;
                //tooltip._options.cornerRadius = tooltip._options.bodyFontSize*0.50;

              tooltip.update();
              // we don't actually need this since we are not animating tooltips
              tooltip.pivot();
              tooltip.transition(easing).draw();
            }
                    });
                    chart.options.tooltips.enabled = false;
                }
            }
        })

        var myPieChart = new Chart(ctx, {

            type: 'bar',
            data: data,
            options: {

                showAllTooltips: true,
                                 legend: {
            display: false
         },
     tooltips: {
             titleFontSize: 10,
             bodyFontSize: 10,
             pointHitDetectionRadius : 3,
             yAlign: 'top',
               responsive: false,
            customTool: customTooltips,
        callbacks: {
                 title: function() {}
             },
        },
     scales:{
           xAxes: [{
                    stacked: true,
                    ticks: {
          beginAtZero: true
        },}]
        },


    }
        });
</script>

JSFiddle：https://jsfiddle.net/560gortq/2/