afficher le nombre total dans le centre de beignet de camembert à l'aide de google charts?
Je suis nouveau sur angularjs et google charts j'ai fait un camembert maintenant, je veux la suite:
1- display total components inside the centre of the pie charts.
2- display pieSliceText outer side of the pie slice
vous pouvez voir l'
c'est ce que je veux:
comment cela peut-il être fait
mon exemple de code:
<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);
}
- Partielle duplicata de celui-ci: stackoverflow.com/questions/20911919/...
- regardez stand question énorme différence b/w remorquage, parce que je suis en utilisant google charts pour les camemberts et je veux afficher le nombre total de composants qui ne sont pas tous les composants de certaines valeurs.
- Eh bien, je ne t pense que oui. Mais tout de même. Avez-vous lu cet article et de tenter toute partie de celui-ci? developers.google.com/chart/interactive/docs/overlays j'ai pris votre graphique pour mettre le composant intermédiaire dans. Les étiquettes probabaly nécessitent le déplacement avec JS après le dessin du diagramme.
- j'ai lu la doc sur google développeur de google charts, mais n'a pas pu trouver un moyen pour afficher certains des composants à l'intérieur de donuts comme dans le cliché pourriez-vous s'il vous plaît créer un plunker pour elle?
- je ne fais pas n'importe quel objet comme ce nouveau google.la visualisation.Graphique en courbes je viens d'ajouter des données dans la variable et dans mon code html place dans google-graphiques directive < div class="graphique-container"> <div class="graphique-title" style="padding-right:7em;">Composants</div> <div google-carte graphique="userdata"></div> </div>
Vous devez vous connecter pour publier un commentaire.
OK, essayez cette http://jsfiddle.net/L1tct3Lv/3/ ... ses un rapide hack mais vous pouvez certainement améliorer considérablement par le calcul les positions en se basant sur les dimensions et autres.
}
Mettre en place un peu superpositions comme ceci:
Avec ce css:
Résultat est le suivant:
Faire des recherches sur ce que j'ai trouvé ce lien: https://codepen.io/cireriddler/pen/yyeLpE
Ce code n'est pas mon cas, mais je pense qu'il répond au problème de fractionnement le graphique de l'info à l'intérieur du graphique.
Exemple: