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

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)"]
    }

我创建了一个fiddle 来解释这个问题。

Answer 1

这不完全符合您的要求，但很接近：

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

然后在您的图表选项中：

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

Answer 2

就像 Devon Sams 所说，你可以使用这个：

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

但是在您的图形选项中，您将模式放在“标签”上并在“真”上相交：

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

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

这是我在 CodePen 上制作的一个示例：Link