使用谷歌图表在甜甜圈饼图的中心显示总数？答案

【问题标题】：display total in center of donut pie chart using google charts?使用谷歌图表在甜甜圈饼图的中心显示总数？
【发布时间】：2017-06-28 10:06:12
【问题描述】：

我是 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);
}

【问题讨论】：

部分重复：stackoverflow.com/questions/20911919/…
好吧，我不这么认为。但还是。你读过这篇文章并尝试过它的任何部分吗？ developers.google.com/chart/interactive/docs/overlays我拿了你的图表并用它来放置中间组件。标签可能需要在绘制图表后用 JS 移动它们。
@KevinBrown 我在 google 开发人员上阅读了有关 google 图表的文档，但找不到像快照一样显示甜甜圈内的一些组件的方法，请您为它创建一个 plunker 吗？
@in 我没有制作像这个新的 google.visualization.LineChart 这样的任何对象，我只是在变量中添加数据，并在我的 html 中放置 google-charts 指令

组件

标签： google-visualization

【解决方案1】：

好的，试试这个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;
}

结果是这样的：

【讨论】：

【解决方案2】：

研究这个我发现了这个链接：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>

【讨论】：