在高图中向图例添加工具提示 [英] Adding tooltip to legend in highcharts

问题描述

我正在尝试在图表中向图例添加工具提示.我正在使用饼图.使用angular js框架. 图例代码如下

I am trying to add a tooltip to the legend in highcharts. I am using a pie chart. Using angular js framework. The legend code is as below

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 do not get the expected results. it just displays the letter H and no icon. If i use a standalone icon like

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

它仅显示图标.但是我无法添加任何工具提示.我在线搜索并找到了使用jquery UI插件的解决方案.有没有插件而不使用有角度的材质图标的其他方法吗?请提出建议.

It just displays the icon. But I am unable to add any tooltip. I searched online and found a solution using the jquery UI plugin. Is there any other way without the plugin and using the angular material icons? Please suggest.

Ps:我也尝试过使用单引号/双引号而不是倒勾.

Ps: I have also tried with single quotes / double quotes instead of inverted ticks.

推荐答案

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

Unfortunately, tooltip in a legend is not supported. However, you can create it using Highcharts.SVGRenderer. Check code and demo posted below.

代码:

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参考:

• https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

https://api.highcharts.com/class- reference/Highcharts.SVGElement#on

这篇关于在高图中向图例添加工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！