javascript - Chart.js 2.7.0分组水平条形图，如何获取工具提示以显示一个条形而不是整个组的数据？

这是一个分组的水平条形图:

http://jsfiddle.net/jmpxgufu/185/

var ctx = document.getElementById(“myChart”)。getContext(“2d”);

        var chart = {
        options: {
        scales: {
                 yAxes: [{ barPercentage: 1.0 }],
          },
      tooltips: {
         callbacks: {
            label: function(tooltipItem, data) {
console.log(tooltipItem);
           return data.datasets[tooltipItem.datasetIndex].label +': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();
}
}
},
          responsive: true,
          maintainAspectRatio: false,
          animation: {

                    onComplete: function(animation) {
                    }
                }
      },
        type: 'horizontalBar',
        data: {
            labels: ['Topic1'],
      datasets: [
      {
         label: 'Something',
         borderColor: 'blue',
         borderWidth: 1,
         backgroundColor: Color('blue').alpha(0.5).rgbString(),
         data: [40],
         fill: false
      },
      {
         label: 'Something else',
         borderColor: 'orange',
         borderWidth: 1,
         backgroundColor: Color('orange').alpha(0.5).rgbString(),
         data: [17],
         fill: false
      }
      ]
        }};

   var myLiveChart = new Chart(ctx, chart);

如果您查看图表，则有两个与标签“Topic1”相关联的条形图(橙色和蓝色)。

当我将鼠标悬停在橙色条上时，它说:

Topic1
Something: 40
Something else: 17

当我将鼠标悬停在蓝色条上时，它说:

Topic1
Something: 40
Something else: 17

您还将注意到，由于该组中有两个栏，因此该函数执行两次，以我返回的字符串为单位，并形成此“分组”工具提示消息(我将console.log放入其中以显示其正在执行中两次)。

我只想要我悬停的酒吧的数据。

当我将鼠标悬停在橙色条上时，我要说:

Topic1
Something else: 17

当我将鼠标悬停在蓝色条形上方时，我要说:

Topic1
Something: 40

但是，我还没有弄清楚如何确定哪个是事件的(两个)。

我在这里想念什么？

最佳答案

要获得所需的行为，您需要将工具提示mode设置为 nearest / point :

tooltips: {
   mode: 'nearest'
}

来自docs:



这是working fiddle。

关于javascript - Chart.js 2.7.0分组水平条形图，如何获取工具提示以显示一个条形而不是整个组的数据？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47087110/