时间戳

首页 > 解决方案 > 在垂直条形图中的列右侧显示​​工具提示

angularjs - 在垂直条形图中的列右侧显示​​工具提示

问题描述

我有一个高图，我希望工具提示悬停在列的右侧（垂直条形图），因为目前图表顶部没有足够的空间，所以它显示在列的底部。

仅供参考-我浏览了各个站点，发现大多数示例都是针对可以向左或向右进行位置的折线图给出的，而不是特别针对默认光标位置在顶部或向下的垂直条形图

请参考这张图片 

var tooltip = {
                'formatter': function() {
                    var name = this.series.name;
                    if (_.isObject(name)) { // jshint ignore:line
                        name = name.last + ', ' + name.first;
                    }
                    var key = this.key;
                    if (_.isArray(this.key)) { // jshint ignore:line
                        //Multi people search object
                        key = '';
                        for (var i = 0; i < this.key.length; i++) {
                            key += this.key[i].last + ', ' + this.key[i].first + '<br>';
                        }
                    } else if (_.isObject(this.key)) { // jshint ignore:line
                        key = key.last + ', ' + key.first;
                    }
                    var val = chartUtility.handleAddingThousandSeparator(sourcedata, chartUtility.handleRoundingSingleValue(sourcedata, this.point.y));
                    val = chartUtility.prefixSuffix(sourcedata, this.point, val);
                    return '<strong>' + key + '</strong><table>' + '<tr><td style="color: ' + this.series.color + '"> :' + name + ': </td>' + '<td style="text-align: right"><b>' + val + '</b></td></tr>';
                }
            };`

标签： angularjshighcharts

解决方案

使用定位器选项，您可以这样做：

tooltip: {
positioner: function(labelWidth, labelHeight, point) {
  if (point.plotY < 55) { // for highest columns
    return {
      x: point.plotX + 100,
      y: point.plotY + 30
    };
  } else { // others columns
    return {
      x: point.plotX,
      y: point.plotY - 20
    };
  }
},
},

小提琴

推荐阅读