Highcharts圓環圖定製

我與highcharts工作，旨在讓類似這樣的圖表： Highcharts圓環圖定製

現在，我一直在與整個磨難玩了一段時間，現在我已經來了能夠達到以下幾點：http://jsfiddle.net/ccjSy/24/

$(function() { 
    $(document).ready(function() { 
     var chart = null;    
     var categories = ['Body Fat', 'Lean Mass'], 
      name = 'Body Fat vs. Lean Mass', 
      data = [{ 
       y: 69, 
       color: '#F0CE0C', 
       drilldown: { 
        name: 'Body Fat', 
        color: '#F0CE0C' 
       } 
      }, { 
       y: 207, 
       color: '#23A303', 
       drilldown: { 
        name: 'Lean Mass' , 
        color: '#23A303' 
       } 
      }]; 


     // Build the data array 
     var browserData = []; 
     for (var i = 0; i < data.length; i++) { 

      // add browser data 
      browserData.push({ 
       name: categories[i], 
       y: data[i].y, 
       color: data[i].color 
      }); 

     } 

     // Create the chart 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'donutchart', 
       type: 'pie', 
       spacingTop: 0 
      }, 
      title: { 
       text: 'Your Body Fat vs Lean Mass', 
       style: {"color": '#7d7d7d'} 
      }, 
      series: [{ 
       name: 'Weight', 
       data: browserData, 
       dataLabels: { 
        style: { 
         fontFamily: 'ArialMT', 
         fontSize: '15px', 
         fontWeight: 'bold', 
         color: '#7d7d7d' 
        } 
       }, 
       innerSize: '70%' 
      }], 
      tooltip: { 
       valueSuffix: ' lbs' 
      }, 
      plotOptions: { 
       series: { 
        cursor: 'pointer' 
       } 
      } 
     }); 
    }); 
});

我想留下的空間空圓環圖中並插入與重量的標籤定製圈。不過，我不能確定如何解決以下問題：
1）留下更多的定義空格在我的兩列
2）之間如何正確對準我的兩個數據標籤？（正如你可以在模型中看到的，它們是直線，中線連接）
3）如何在圖像中顯示兩個標籤下的數據，包括磅數和百分比。

來源

2016-08-08 Zohair Zaman

回答您的每三個問題：

「？更白柱之間空間」 - 增加一個plotOptions.pie.borderWidth元素。默認值是1.我用5給它更多的空白。
「正確對齊兩個數據標籤？」 - 您可以根據兩個數據值計算自定義startAngle，這兩個數據值將爲您提供正確的角度。由於系列中只有兩個數據值，這很容易。

計算由startAngle爲餅圖
```
var startAngle = 0 - (90 + (180 * (data[0].y/(data[0].y + data[1].y)))); 
```
請注意，如果你改變了y值第一個數據對象，餅圖的「體脂肪」部分依然會保持它的正確位置，甚至因爲圖表的一部分變大或變小。

「顯示數據下面的兩個標籤以自定義格式？」 - 使用plotOptions.pie.format自定義格式應用於餡餅值標籤。

format: '<div style="position: relative; top: -20px; text-align: center">{point.name}<br><b><span style="font-size: 29px">{point.percentage:.0f}%</span></b> ({point.y} lbs)</div>'

這裏的工作JSFiddle看到的結果。您仍然需要在餅圖後面添加一個深灰色圓圈並添加「總重量」文本，但這不應該太難。

因爲我確定你會對此感到疑惑，所以我應該提到餅圖標題下面有很多空白區域，因爲它會留下足夠空間容納可能出現在餅圖上方或下方的其他標籤。由於您只使用兩個始終位於餅圖左側/右側的值，因此這並不會改變HighCharts準備在周圍區域顯示其他標籤的事實。

來源

2016-08-08 21:17:01

Highcharts圓環圖定製

回答

相關問題