highcharts圖表合唱篇：如何結合Renderer.circle渲染類實現一些無厘頭的需求如圓環內環顏色填充
今天與群裡的大夥弄了一個很有意思的東西。這個有意思的東西來源於一個想借用餅狀圖pie實現一個環形圖，且環形圖內環需要設定一個顏色，另外顯示最小塊的百分比在內環內。至於如何在餅狀圖的基礎上弄成環形圖前面已經寫了一篇相關性的文章，請參考：http://www.stepday.com/topic/?739。接著我們就來聊聊重點地方吧。
1、如何將最小塊的百分比顯示在內環中
1）、我們如何才能夠讓每一塊區域都顯示資料值呢？我們通常是設定plotOptions內的dataLabels的enabled為true，程式碼見下：
1.plotOptions: {
2.pie: {
3.dataLabels: {4.enabled:true
//顯示資料值
5.}
6.}
7.}
2）、但是我們需要作出相應的控制，只需要所在百分比最小的才顯示資料值，所以我們可以通過配置formatter格式化方法來處理：
01.plotOptions: {
02.pie: {
03.dataLabels: {
04.enabled:true,
//顯示資料值
05.formatter:function(){
06.if(this.point.name ==
"Firefox")
07.return
"";
08.else
09.return
this.percentage.toFixed(2)+"%";
//百分比保留兩位小數
10.}
11.}
12.}
13.}
3）、資料值預設都是顯示在外圍，所以我們需要通過控制其distance距離值引數來加以調整：
1.plotOptions: {
2.pie: {
3.dataLabels: {
4.distance:-170,
//資料值的距離值
4）、我們還可以設定資料值的顏色值和字型大小等屬性：
01.plotOptions: {
02.pie: {
03.borderColor:null,
//塊狀邊框設定為空
04.dataLabels: {
05.distance:-170,
06.formatter:function(){
07.if(this.point.name ==
"Firefox")
08.return
"";
09.else
10.return
this.percentage.toFixed(2)+"%";
11.},
12.style:{
13.fontSize:"50px"
14.}
15.},
16.innerSize:'75%',
17.colors: [
18.'#8bbc21',
19.'#0d233a'
20.]
21.}
22.}
這樣一來資料值就顯示在了內環中了的。
2、如何設定內環的顏色
我們設定了innerSize屬性值後，餅狀圖的內徑就變大了，內徑空出來的那一塊就變得和整個圖形區為一體。所以我們無法通過某個屬性值來設定內徑處的顏色。怎麼辦呢？下面是一些朋友提供的解決辦法：
1）、@倘若先生提供的思路：弄一個背景圖，通過設定圖形區域的margin屬性值加以調整，以此達到與背景圖的設計融為一體，從視覺上面欺騙使用者內環有顏色。
2）、最後由@微.淺笑大仙提供了一個採用Renderer類來畫一個圓，通過控制其圓的相對位置來穩合環形圖。
上面的兩種方法都是可行的，但是最終都要解決掉一個很實際的問題，那就是不同瀏覽器在展現圖表的時候環的大小會變動，一旦變動那麼用於卡位的Renderer話的circle圓位置就會出現錯位現象。
最後通過觀察是因為木有指定餅狀圖size大小值以及chart的高寬值問題導致的，因為distance以及circle的x和y座標都是針對圖表的左上角來說的。所以設定這些屬性是很有必要的。
21）、設定chart的高寬值
1.chart: {
2.type:
'pie',
3.height:400,
4.width:400
5.},
22）、設定pie的size的直徑值
1.plotOptions: {
2.pie: {
3.size:300,//圖表直徑大小
這樣一來我們就可以完美將環形圖和圓融合在一起實現內環顏色的渲染效果。效果圖如下所示：
最後貼上完美的示例程式碼：
01.$(function
() {
02.$('#container').highcharts({
03.chart: {
04.type:
'pie',
05.height:400,
06.width:400
07.},
08.title:{
09.text:"圓環示例圖"
10.},
11.plotOptions: {
12.pie: {
13.size:300,//圖表直徑大小
14.borderColor:null,
15.dataLabels: {
16.distance:-170,
17.formatter:function(){
18.if(this.point.name ==
"Firefox")
19.return
"";
20.else
21.return
this.percentage.toFixed(2)+"%";
22.},
23.style:{
24.fontSize:"50px"
25.}
26.},
27.innerSize:'75%',
28.colors: [
29.'#8bbc21',
30.'#0d233a'
31.]
32.}
33.},
34.tooltip:{
35.enabled:false
36.},
37.credits:{
38.text:"www.stepday.com",
40.style:{
41.color:"#ffffff"
42.}
43.},
44.series: [{
45.data: [
46.['Firefox', 44.2],
47.['IE7', 6.6]
48.]
49.}]
50.},function(chart){
51.//在圖表內的指定位置畫一個圓
52.//第一個引數表示圓心距離圖表左側邊緣的距離值
53.//第二個引數表示圓心距離圖表上側邊緣的距離值
54.//第三個引數表示圓半徑大小
55.chart.renderer.circle(200, 212, 115).attr({
56.fill:
'#1aadce',
57.stroke:
'black',
58.'stroke-width': 0
59.}).add();
60.});
61.});