根据鼠标位置定位工具提示

Question

我正在使用堆积条形图,y轴上的默认范围为0 - 24.每个堆叠条形由6个条形(从0到4)组成.如果堆叠条的总大小很小,则用户无法读取工具提示,因为它始终显示在鼠标指针下方.

有没有办法表明应该显示工具提示的位置(例如,如果图表的上半部分悬停在鼠标下方,如果图表的下半部分悬停在上方？

我目前使用的选项是:

$scope.options={
        scales: {
            xAxes: [{
                        stacked: true,
                        type: "time",
                        format: "YYYY-MM-DD",
                        time: {
                            displayFormats: {
                                'millisecond': 'M-D', // Sep 4 2015
                                'second': 'M-D', // Sep 4 2015
                                'minute': 'M-D', // Sep 4 2015
                                'hour': 'M-D', // Sep 4 2015
                                'day': 'M-D', // Sep 4 2015
                                'week': 'M-D', // Sep 4 2015
                                'month': 'M-D', // Sep 4 2015
                                'quarter': 'M-D', // Sep 4 2015
                                'year': 'M-D', // Sep 4 2015
                            },
                            tooltipFormat: 'M-D'
                        }
                }],
                yAxes: [{
                        stacked: true,
                        ticks:{
                            min: 0,
                            max: 24
                        }
                }]
        },
            colors: ["rgba(192,216,0,1.0)","rgba(148,64,237,1.0)","rgba(77,167,77,1.0)",
                     "rgba(203,75,75,1.0)","rgba(255,206,123,1.0)","rgba(0,168,240,1.0)"]
    }

我创造了一个小提琴来解释这个问题.

Answer 1

这不是你要求的,但它很接近:

Chart.Tooltip.positioners.cursor = function(chartElements, coordinates) {
  return coordinates;
};

然后在图表选项中:

options: {
  tooltips: {
    mode: 'index',
    position: 'cursor',
    intersect: false
  }
}

Answer 2

就像德文山姆斯说的，你可以使用这个：

    Chart.Tooltip.positioners.cursor = function(chartElements, coordinates) {
      return coordinates;
    };

但是在您的图形选项中，您将模式放在 'label' 上并在 'true' 上相交：

    options: {
      tooltips: {
        mode: 'label',
        position: 'cursor',
        intersect: true
      }
    }

悬停数据时，工具提示指针将始终位于鼠标指针位置的图表栏/线条上方。

这是我在 CodePen 上制作的示例：链接