onclick在中心显示甜甜圈图片件信息

我试图为我们的状态页创建一个高图，每当一个甜甜圈被点击时，它就会分离，但是它也需要以很好的格式显示它包含的任何信息在甜甜圈图的中心，但是我无法使它工作。onclick在中心显示甜甜圈图片件信息

我已经设法创建了一个点击功能，将点击片段的数据放入图表下方的一个范围内，但我知道有一个更好的方法来做到这一点。

  series: { 
      point: { 
       events: { 
        click: function() { 
         $("#displayStats").text(this.name + this.y); 
         }, 
        load: function() { 
        var chart = this, 
         rend = chart.renderer, 
         pie = chart.series[0], 
         left = chart.plotLeft + pie.center[0], 
         top = chart.plotTop + pie.center[1], 
     text = rend.text("text", left, top).attr({ 'text-anchor':'middle'}).add();    
          } 
        } 
       } 
      } 
     },

请在下面检查我的小提琴，感谢阅读

jsFiddle

来源

2016-09-29 Madvillain

我认为这是你想要做的：http：//stackoverflow.com/questions/9732205/place-text-in-center-of-pie-chart-highcharts –

部分，是的，我试图显示在圆环图的中心单击一个作品时的单个作品数据，而不仅仅是一个标题。 – Madvillain

我知道你已经有一个答案...看看这一切都是一样的：https：//jsfiddle.net/grrakesh4769/ndb9sphz/1/ –

您可以使用chart.renderer对点点击添加自定义标签在图表中：

addLabel = function(point) { 
    $('.cLabel').remove(); 
    var text = point.name + ': ' + point.y, 
     chart = point.series.chart, 
     renderer = chart.renderer; 
    chart.renderer.label(text, chart.chartWidth/2, chart.chartHeight/2).attr({ 
     'text-anchor': 'middle', 
    }).addClass('cLabel').add(); 
    };

这里你可以看到一个例子它如何工作：https://jsfiddle.net/ucweax9h/13/

来源

2016-09-29 11:28:08

感谢您的演示，我已经使用渲染器，但是我的工作不正常。 – Madvillain

我有一个额外的问题，如果你不介意，我一直在试图获得一个计数动画，在例子中看到这样的https://codepen.io/shivasurya/pen/FatiB在数字标签上，我有一个感觉这可以用你现有的解决方案相当简单的实现，但是我没有成功。更新原始问题中的小提琴。 – Madvillain

在这里，你可以看到一个例子，你可以如何实现这个计数动画：https：//jsfiddle.net/ucweax9h/18/ –

onclick在中心显示甜甜圈图片件信息

回答

相关问题