Добавление всплывающей подсказки к легенде в старших чартах

Question

Я пытаюсь добавить всплывающую подсказку к легенде в старших чартах.Я использую круговую диаграмму.Использование угловой рамки 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>`
  }



},

Я не получаю ожидаемых результатов.он просто отображает букву Н и без значка.Если я использую автономный значок, такой как

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

, он просто отображает значок.Но я не могу добавить какую-либо подсказку.Я искал в Интернете и нашел решение, используя плагин jquery UI.Есть ли другой способ без плагина и использования значков угловых материалов?Пожалуйста, предложите.

Ps: я также пробовал использовать одинарные кавычки / двойные кавычки вместо перевернутых тиков.

Answer 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:

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

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