使用谷歌圖表在甜甜圈餅圖中心顯示總數？

我是新來angularjs和谷歌圖表我犯了一個餅圖，現在我想以下幾點：使用谷歌圖表在甜甜圈餅圖中心顯示總數？

1- display total components inside the centre of the pie charts. 
2- display pieSliceText outer side of the pie slice

你可以看到這就是我想要的：

如何才能做到這一點我示例代碼：

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}">     </script> 
<div id="piechart" style="width: 900px; height: 500px;"></div>

的javascript：

google.setOnLoadCallback(drawChart); 
function drawChart() { 

    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['Work',  11], 
     ['Eat',  2], 
     ['Commute', 2], 
     ['Watch TV', 2], 
     ['Sleep', 7] 
    ]); 

    var options = {  
     height: 360, 
     width: 360, 
     pieHole: 0.5, 
     showLables: 'true', 
     pieSliceText: 'value', 
     pieSliceTextStyle: { 
      color: 'white', 
      fontSize:18 
     }, 
     legend: { 
      position: 'right', 
      alignment: 'center' 
     }, 
     chartArea: { 
      left: 10, 
      top: 10, 
      width: '130%', 
      height: '65%' 
     }, 
     tooltip: { 
      trigger:'none' 
     } 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 

    chart.draw(data, options); 
}

來源

2015-08-27 Hassan

的這部分重複：http://stackoverflow.com/questions/20911919/put-sum-of-values-in-center-of-doughnut-chart –

@KevinBrown看在展位問題巨大的差異黑/白拖，因爲我使用谷歌圖表的餅圖，我想顯示組件的總數，而不是所有組件的一些價值觀。 – Hassan

我不這麼認爲。但仍然。您是否閱讀過這篇文章並嘗試了其中的任何部分？ https://developers.google.com/chart/interactive/docs/overlays 我把你的圖表，並用它來把中間組件。英寸標籤可能會需要在繪製圖表後移動它們與JS。 –

好吧，試試這個http://jsfiddle.net/L1tct3Lv/3/ ......它是一個快速入侵，但你可以通過計算大小等的位置，大大改善它。

google.setOnLoadCallback(drawChart); 

<!-- This generates the google chart --> 
function drawChart() { 
var data = google.visualization.arrayToDataTable([ 
    ['Task', 'Hours per Day'], 
    ['Work',  11], 
    ['Eat',  2], 
    ['Commute', 2], 
    ['Watch TV', 2], 
    ['Sleep', 7] 
]); 

var options = {  
    height: 360, 
    width: 360, 
    pieHole: 0.8, 
    showLables: 'true', 
    pieSliceText: 'value', 
    pieSliceTextStyle: { 
     color: 'white', 
     fontSize:18 
    }, 
    legend: { 
     position: 'right', 
     alignment: 'center' 
    }, 
    chartArea: { 
     left: 10, 
     top: 10, 
     width: '130%', 
     height: '65%' 
    }, 
    tooltip: { 
     trigger:'none' 
    } 
}; 
var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
jQuery('#cnt').text(data.Gf.length); 
chart.draw(data, options);

}

設置了一些重疊是這樣的：

<div id="JSFiddle"> 
<div id="chart_div"></div> 
<div id="cnt" class="overlay"></div> 
<div class="overlay-label">total components</div> 
</div>

有了這個CSS：

#JSFiddle { 
position: relative; 
} 

.overlay { 
display:block; 
width:240px; 
height:240px; 
text-align:center; 
vertical-align: middle; 
position: absolute; 
top: 0px; /* chartArea top */ 
left: 0px; /* chartArea left */ 
font-size: 80px; 
margin-top: 60px; 
} 
.overlay-label{ 
    display:block; 
width:240px; 
height:240px; 
text-align:center; 
vertical-align: middle; 
position: absolute; 
top: 0px; /* chartArea top */ 
left: 0px; /* chartArea left */ 
margin-top: 140px; 
font-size: 20px; 
}

結果是這樣的：

來源

2015-08-28 04:33:34

研究這個，我發現這個鏈接：https://codepen.io/cireriddler/pen/yyeLpE

此代碼是不是我的，但我認爲他回答這個問題，從內部圖表信息分割圖。

例子：

<div id="donutchart" class="col-xs-12 col-sm-6 col-md-4"> 
    <div id="chart"></div> 
    <div id="labelOverlay"> 
    <p class="used-size">90<span>%</span></p> 
    <p class="total-size">de economia mensal</p> 
    </div> 
</div>

來源

2017-05-25 16:45:40

使用谷歌圖表在甜甜圈餅圖中心顯示總數？

回答

相關問題