Highchart在图例鼠标悬停中间显示文本

Posted 2021-05-05

我有following code。我想要做的是，当鼠标悬停在图例上时，文字应该出现在甜甜圈的中心。

喜欢它发生在mouseOver单片甜甜圈时。

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'distrubution_of_funds',
            type: 'pie',
            borderRadius: 0
        },

...

        series: [ {
            name: 'Versions',
            data: [{
                "name": "№ 123 (manager)",
                "y":2709.74,
                "color": "#E85620"
            },{
                "name": "№ 333",
                "y":885.5,
                "color": "#92B145"
            }, {
                "name": "other (127)",
                "y": 3151.3274920329,
                "isOther": true,
                "color": "#B6B9BE"
            }],
            size: '80%',
            innerSize: '60%',
            showInLegend: true,
           dataLabels: {
                enabled: false

            }
        }],

        legend: {
            align: 'right',
            verticalAlign: 'middle',
            layout: 'vertical',
            usehtml: true,
            width: 160,

        }

    },
    function(chart) { 

        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;

        // Render the text
        chart.innerText = chart.renderer.text('$$$',  270, 210).css({

            color: '#0f1122',
            fontSize: '16px',
            textAlign: 'center'
        }).attr({zIndex: 999}).add();
    });

怎么做？

例如工作图表at this page

答案

我添加了jquery库以便使用更少的代码，因此这不是vanilla javascript解决方案。我在你的function(chart) { // on complete部分中添加了以下代码：

 $(chart.series[0].data).each(function(i, serie){
      $(serie.legendItem.element).hover(function(){
          chart.innerText.attr({text: serie.y})
      }, function(){
          chart.innerText.attr({text: '$$$'});
      });                
 }); 

这有点棘手，但基本上，你在每个hover元素上附加一个legendItem事件，它将图表innerText属性更改为y的serie属性。

你可以看到它在这里工作：JSFiddle demo

另一答案

它的作品在这里：

http://jsfiddle.net/fw71sxx6/5/

我添加了jquery以在函数图表中添加它：

// Render the text
            chart.innerText = chart.renderer.text('$$$',  270, 210).css({

                color: '#0f1122',
                fontSize: '16px',
                textAlign: 'center',
                display: 'none'
            }).attr({
                class:'getlegend',
                zIndex: 999
            }).add();

我添加这个脚本：

$( document ).ready(function() {
  $('.highcharts-series').mouseover(function() {
       $('.showlegend').html($('.getlegend').html());
  });
});