chart.js - 根据鼠标位置定位工具提示

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
  }
}