根据鼠标位置定位工具提示 [英] Position tooltip based on mouse position

问题描述

我使用的是堆叠的条形图，其y轴的默认范围是0-24。每个堆叠的条形图都由6个条形（从0到4）组成。如果堆积条的总大小很小，则用户将无法阅读该工具提示，因为它始终显示在鼠标指针下方。

I'm using a stacked bar chart with a default range on the y -axis from 0 - 24. Each stacked bar consists of 6 bars (that go from 0 to 4). If the total size of the stacked bar is small, the user can not read the tooltip because it is always displayed below the mouse pointer.

是否有一种方法可以指示该位置应该显示工具提示（例如，如果将鼠标悬停在图表的上方，则在鼠标下方；如果将鼠标悬停在图表的下方，则在上方？

Is there a way to indicate where tooltip should be displayed (e.g. below the mouse if the upper part of the chart is hovered, above if the lower part of the chart is hovered?

m当前使用的是：

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

我创建了小提琴来解释问题。

推荐答案

这并不是您所要的，但已经很接近了：

This isn't exactly what you asked for, but it's close:

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

然后在图形选项中：

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

这篇关于根据鼠标位置定位工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！