javascript - hacer - Cálculo del porcentaje del gráfico de sectores
graficas con canvas html5 (1)
Tengo una página que muestra datos en forma de un gráfico circular. Yo uso Google Charts y aquí está el código:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[''Product'', ''Sale In Percent''],
[''product2'', 5.5],
[''product3'', 7.5],
[''product4'', 1.5],
[''product5'', 8.5],
]);
var options = {
title: ''Product Sales''
};
var chart = new google.visualization.PieChart(document.getElementById(''piechart2''));
chart.draw(data, options);
}
</script>
<div id="piechart2" style="width: 700px; height: 400px; position: relative;"></div>
Y aquí está una FIDDLE JS en funcionamiento: https://jsfiddle.net/alex4uthis/j78vmq00/2/
Aquí tengo 1 producto más como producto1 y su valor es 77. Como este valor siempre es más alto, omití del gráfico. Cuando dibujo el gráfico, podemos ver que product2 por ciento se convierte en 23.9%, product3 por ciento se convierte en 32.6, etc. ... Pero quiero obtener el gráfico circular con lo que he dado en la columna "Sale in Percent". (Significa producto1 dibujar con 5.5 etc ...) Por favor, ayúdenme en esto.
No puede tener un gráfico circular que totalice menos del 100%, por lo que la biblioteca asume que la suma de los valores que pasa debe considerarse como 100%.
Como no está pasando el 77, sus valores solo suman 23. 5.5/23 = 23.9% y 7.5/23 = 32.6%
Si desea que el gráfico se muestre con las etiquetas que leen los porcentajes proporcionados, lo primero que debe hacer es establecer la opción pieSliceText en value para etiquetar el sector con ''El valor cuantitativo del sector''. ( https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=en#configuration-options )
A continuación, si desea mostrar la etiqueta con un signo de porcentaje, solo querrá ir agregándola manualmente después de que el gráfico se visualice así:
[].slice.call(document.querySelectorAll(''#piechart2 path + text''))
.forEach(function(el) {
el.textContent += ''%'';
});
Aquí hay un violín que funciona: https://jsfiddle.net/tq37y0p5/1/