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在中心顯示甜甜圈圖片件信息

回答

相關問題