在高图中向图例添加工具提示答案

【问题标题】：Adding tooltip to legend in highcharts在高图中向图例添加工具提示
【发布时间】：2019-02-14 05:39:52
【问题描述】：

我正在尝试向 highcharts 中的图例添加工具提示。我正在使用饼图。使用 Angular js 框架。图例代码如下

legend: {
  useHTML: true,
  layout: 'vertical',
  align: 'left',
  itemMarginTop: 10,
  itemMarginBottom: 15,
  title: {
    style: {
      fontSize: "14px",
      fontWeight: "600",
      color: "#404040"
    }
  },
  itemStyle: {
    fontWeight: 'normal',
    color: '#404040',
    fontSize: '14px'
  },
  //x  : 70,
  //y:  110,
  labelFormatter: function() {

    return ` <md-icon>
                  <md-tooltip  md-direction="top">Hello</md-tooltip>
                 <i class="material-icons help_icon">info_outline</i>
                </md-icon>`
  }



},

我没有得到预期的结果。它只显示字母 H 而没有图标。如果我使用像

这样的独立图标

<i class="material-icons help_icon">info_outline</i>

它只是显示图标。但我无法添加任何工具提示。我在网上搜索并找到了使用 jquery UI 插件的解决方案。有没有其他方法没有插件和使用角材料图标？请提出建议。

Ps：我也试过用单引号/双引号代替倒勾。

【问题讨论】：

你能提供你的代码示例 stackblitz 吗？
插入单引号或双引号试试 back-stick-<md-icon> <md-tooltip md-direction="top">Hello</md-tooltip> <i class="material-icons help_icon">info_outline</i> </md-icon>
查看此线程：highcharts.com/forum/viewtopic.php?t=39758。在那里，您将找到使用 Highcharts.SVGRenderer 添加到图例项的自定义工具提示。演示：jsfiddle.net/BlackLabel/rzm0e4yj
您好，感谢您的回复。我在 html 代码中添加了反引号。它仍然不起作用。上面指出的 jsfiddle 也使用 jquery 。我正在寻找一种没有 jquery 或任何其他插件的方法。
嗨，我也试过反引号。这是行不通的。我还看到提到的表单主题，它使用 jquery。我正在寻找一种没有 jquery 或任何其他插件的方法。使用 angularjs。

标签： angularjs highcharts

【解决方案1】：

很遗憾，不支持图例中的工具提示。但是，您可以使用Highcharts.SVGRenderer 创建它。检查下面发布的代码和演示。

代码：

var chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        var chart = this,
          legend = chart.legend,
          legendItems = legend.allItems,
          group,
          rectElem,
          textElem,
          box,
          i;

        group = chart.renderer.g('legend-tooltip').attr({
          transform: 'translate(-9999, -9999)',
          zIndex: 99
        }).add();

        textElem = chart.renderer.text().attr({
          class: 'legend-tooltip-text',
          zIndex: 7
        }).add(group);

        rectElem = chart.renderer.rect().attr({
          'class': 'legend-tooltip',
          'stroke-width': 1,
          'stroke': '#c5c5c5',
          'fill': 'rgba(245, 245, 245, 0.95)',
        }).add(group);

        for (i = 0; i < legendItems.length; i++) {
          (function(i) {
            var item = legend.allItems[i].legendItem.parentGroup;

            item.on('mouseover', function(e) {
              // Define legend-tooltip text
              var str = chart.series[i].userOptions.fullName;
              textElem.element.innerHTML = str;

              // Adjust rect size to text
              box = textElem.getBBox()

              rectElem.attr({
                x: box.x - 8,
                y: box.y - 5,
                width: box.width + 15,
                height: box.height + 10
              });

              // Show tooltip
              group.attr({
                transform: `translate(${e.clientX + 7}, ${e.clientY + 7})`
              })

            }).on('mouseout', function(e) {
              // Hide tooltip
              group.attr({
                transform: 'translate(-9999,-9999)'
              })
            });
          })(i);
        }
      }
    }
  },
  series: [{
    data: [10, 12, 5],
    fullName: 'Series 1 tooltip'
  }, {
    data: [6, 10, 7],
    fullName: 'Series 2 tooltip'
  }]
});

演示：

https://jsfiddle.net/BlackLabel/3cbpe0mn/

API 参考：

【讨论】：