highcharts - multiple - Personalice la información sobre herramientas y formatee el número con 2 decimales de gráficos altos

tooltip date format highcharts

Question

Estoy usando el gráfico Highcharts para mostrar un gráfico circular. Quiero cambiar la información sobre herramientas para mostrar el campo de data real junto con el nombre de la serie en lugar del valor de porcentaje.

Aquí está la muestra en jsFiddle.

Si verifica la muestra anterior encontrará 2 cosas.

1. La información sobre herramientas es: pointFormat: ''{series.name}: {point.percentage}% '' ie

   Compartir en el navegador: algo de valor porcentual

Quiero mostrar:

Browser share: 40 (data value instead of percentage)

2. A continuación se muestra el texto de la pantalla para cada sección del pastel. Uno puede ver un número de decimales haciendo que el gráfico se vea muy feo.

Quiero mostrar números solo hasta 2 puntos decimales como percentageDecimals: 1 decimales percentageDecimals: 1 utilizado en la información sobre herramientas.

Probé algunas cosas para 1st like series.data que devuelve una matriz de objetos. También series.data [0]. Pero no hay éxito hasta ahora

¿Cómo puedo hacer ambas cosas?

Answer 1

Aquí hay una descripción detallada acerca del formateador de información sobre herramientas http://api.highcharts.com/highcharts#tooltip.formatter

this.point (not shared) / this.points[i].point (shared)

Y prueba this.points[i].point si this.point no funcionó

Answer 2

Puede cambiarlo para que muestre el valor de los datos al modificar su información pointFormat herramientas pointFormat de pointFormat: ''{series.name}: <b>{point.percentage}%</b>'', a pointFormat: ''{series.name}: <b>{point.y}%</b>'',

Puede redondear los números utilizando la función Highcharts.numberFormat() como tal en su formateador:

formatter: function() {
    return ''<b>''+ this.point.name +''</b>: ''+ Highcharts.numberFormat(this.percentage, 2) +'' %'';
}

Answer 3

Puede usar las cadenas de formato para ayudarlo a formatear números y fechas.

x lugares decimales

Ver el JSFiddle

// point.percentage = 29.9345816
pointFormat: ''{point.percentage:.0f}%'' // returns: `30%` - (rounds to nearest)
pointFormat: ''{point.percentage:.1f}%'' // returns: `29.9%`
pointFormat: ''{point.percentage:.2f}%'' // returns: `29.93%`
pointFormat: ''{point.percentage:.3f}%'' // returns: `29.935%`

Separador de miles

Ver el JSFiddle

// point.percentage = 1029.9
{point.percentage:,.0f} // returns: `1,030`
{point.percentage:,.1f} // returns: `1,029.9`

Lea más en la documentación:

Documentación: http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting