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

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

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

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

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

2 个答案: