chartJS水平条-隐藏堆叠的条，但仍显示在工具提示中

如何解决chartJS水平条-隐藏堆叠的条，但仍显示在工具提示中

我正在使用chartJS Horizontal Bar可视化某些数据，并使用annotation plugin在绘图区域中添加垂直线。

我要完成的工作：在工具提示中显示注释值/颜色框。

到目前为止我所做的事情：我已经在条形图中添加了工具提示中的值。（请参见下面的图片和代码）。

我困在哪里：我想隐藏/偏移aBar 1和aBar 2;换句话说，我根本不希望这些栏出现，但是我确实希望条目显示在工具提示中。（请参见第二张图片）。

当前输出

所需的输出

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

var myChart = new Chart(ctx,{
  type: 'horizontalBar',data: {
    labels: false,// RANGE
    datasets: [
        {
        type: 'horizontalBar',label: 'Bar 1',backgroundColor: 'rgba(121,185,29,0.85)',stack: 'Stack 0',data: [
            16        ],borderColor: 'white',borderWidth: 0.5
        },{
        type: 'horizontalBar',label: 'Bar 2',backgroundColor: 'rgba(246,171,0.3125)',data: [
            24        ]
        },label: 'Bar 3',backgroundColor: 'rgba(226,33,27,0.5)',data: [
            80        ]
        },label: 'aBar 1',backgroundColor: '#20C5CB',stack: 'Stack 1',data: [
            6        ]
        },label: 'aBar 2',backgroundColor: '#7f3391',stack: 'Stack 2',data: [
            120        ]
        },]
  },options: {
    responsive: true,legend:false,responsive: true,maintainAspectRatio: false,title: false,tooltips: {
        mode: 'index',intersect: true,bodyFontSize:10,titleFontSize:0,titleMarginBottom:0,},plugins: {
        labels:false,scales: {
        xAxes: [{
            ticks: {
                max: 124,min: 0,stepSize: 10
            }
        }]
    },annotation: {
      annotations: [
        {
            type: 'line',mode: 'vertical',scaleID: 'x-axis-0',value: 6,borderColor: '#20C5CB',borderWidth: 3,borderDash: [6,3],label: {
                enabled: false,content: 'Annotation 2',fontSize: 8,fontStyle: 'normal',rotation: 0,xPadding: 2,yPadding: 2,cornerRadius: 1,}
        },{
            type: 'line',value: 120,borderColor: '#7f3391',content: 'Annotation 1',}
        }
      ]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
<canvas id="myChart"></canvas>

解决方法

将隐藏标签添加到要隐藏的系列数据集中，如下所示：

type: 'horizontalBar',label: 'aBar 1',backgroundColor: '#20C5CB',stack: 'Stack 1',hidden: true,data: [6],

并像这样使用标签工具提示的回调：

tooltips: {
  mode: 'index',intersect: true,bodyFontSize:10,titleFontSize:0,titleMarginBottom:0,callbacks: {
    label: function(tooltipItem,data) {
      return data.datasets.map(ds => ds.label + ': ' + ds.data[tooltipItem.index])
    }
  }
},

在此处找到解决方案：Chartjs show hidden data on tooltip