Saltar al contenido

Highcharts porcentaje del total para gráfico de barras simple

Solución:

Tendrá que recorrer los datos y obtener el total, y luego usar la función de formateador de etiquetas de datos para obtener el porcentaje.

Ejemplo aquí:

http://jsfiddle.net/JVNjs/319/

formatter:function() {
  var pcnt = (this.y / dataSum) * 100;
  return Highcharts.numberFormat(pcnt) + '%';
}

editar::

ejemplo actualizado con etiquetas de eje:

http://jsfiddle.net/JVNjs/320/

[EDITARparacomentarios[[EDITforcomments

Si está tratando de graficar los valores porcentuales de varias series, hay una variedad de problemas fundamentales que surgen.

Si calcula el% de dos series de datos diferentes y muestra el valor% aunque haya trazado el valor sin procesar, su gráfico será engañoso y confuso en la mayoría de los casos.

Trazar los datos como valores porcentuales directamente es la mejor manera de hacerlo en ese caso, y puede agregar el valor de los datos sin procesar como una propiedad adicional en el objeto de punto si desea mostrarlo en una información sobre herramientas o en otro lugar (es decir, http: //jsfiddle.net/JVNjs/735/)

Si insiste en usar el método original en dos series diferentes, entonces puede crear dos variables diferentes para calcular y verificar el nombre de la serie en el formateador para determinar con qué suma de datos calcular.

@jlbriggs tuvo una gran respuesta y me guió por el camino de la creación de esta función de formateador. Esta función siempre comprueba el Actual valores en los datos. Si los datos se actualizan mediante programación en un momento posterior, los porcentajes reflejarán los datos recién actualizados. No dataSum o bucle es necesario ya que el .map().reduce() se encarga de eso por ti.

dataLabels: {
  enabled: true,
  formatter: function() {
    var pcnt = (this.y / this.series.data.map(p => p.y).reduce((a, b) => a + b, 0)) * 100;
    return Highcharts.numberFormat(pcnt) + '%';
  }
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *