在Highcharts容器的兩側對齊標籤（甜甜圈圖）

Question

我有一個項目使用Highcharts 5。我試圖在圓環圖的相對兩側獲得圖表標籤，在每一側直向左右對齊，並且連接器跨度適當。

附件是它應該看起來像的樣子。有關如何實現這一目標的任何想法？

謝謝！

Answer 1

您可以手動創建的Legend採用renderer（HTML標籤和連接線與點）：

var points = this.series[0].points, 
     renderer = this.renderer; 

    points.forEach(function(point) { 
     var labelOptions = point.options.label; 
     if (labelOptions) { 

     // text 
     renderer.text(labelOptions.text, labelOptions.x, labelOptions.y - 30, true).add(); 

     // connector 
     var path = ['M', labelOptions.x, labelOptions.y].concat(labelOptions.connector.path); 
     renderer.path(path).attr({ 
      stroke: 'gray', 
      'stroke-width': 1, 
     }).add(); 

     // dot 
     renderer.circle(labelOptions.x, labelOptions.y, 3).attr({ 
      fill: 'gray', 
      'stroke-width': 1, 
     }).add(); 

     } 
    }); 

選項：

{ 
    name: 'Microsoft Internet Explorer', 
    y: 56.33, 
    label: { 
    x: 400, 
    y: 100, 
    connector: { 
     path: ['l', -50, 0, 'l', 0, 100] 
    }, 
    text: "<div class='label'><img src='https://wordpress.highcharts.com/blog/wp-content/uploads/2017/08/28160952/highcharts_logo.png' width='30' height='30'></img><div>Label text in HTML</div></div>" 
    } 
} 

帶電作業例如（創建一個標籤）：http://jsfiddle.net/kkulig/wdtpyof1/

此演示僅僅是一個很好的起點。您應該創建自己的負責定位標籤的機制。

API參考：http://api.highcharts.com/class-reference/Highcharts.SVGRenderer

Answer 2

這是針對您的問題 的解決方案，您可以自定義連接器並在圓環圖的相對兩側獲取圖表標籤。

http://jsfiddle.net/nmtri1101/ogfbxfqd/2/

Code jsfiddle :)