1

Estoy haciendo una gráfica combinada. Estoy atorado en cómo representar la línea en 2 valores, tanto en número como en porcentaje. No entiendo si la misma Highcharts realiza los cálculos o debo añadir una serie o nodo de data adicional para poder representar. Sería una regla de 3 para sacar el porcentaje. La formula sería

100 - ( (llamadas atendidas * 100) / llamadas recibidas );

No entiendo dónde poner o enviar un arreglo ya con esa información, pero cómo renderizo ambos valores, abandono en valor y en porcentaje

Highcharts.chart('container', {
    title: {
        text: 'Inbound'
    },
    xAxis: {
        categories: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'junio']
    },
    labels: {

    },
    series: [{
        type: 'column',
        name: 'Llamadas Recibidas',
        data: [7128,5067,5816,6005,6569,7260]
    }, {
        type: 'column',
        name: 'Llamadas Atendidas',
        data: [5664,4820,5456,5401,5846,5503]
    }, {
        type: 'column',
        name: 'Llamadas Abandonadas',
        data: [1463,159,360,603,722,1757]
    }, {
        type: 'line',
        name: 'Abandono',
        data: [1463,159,360,603,722,1757],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        },
        tooltip: {
           pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
        },

    }, ]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

4
  • En que parte de la gráfica debes mostrar los valores que indicas? Regularmente yo lo he hecho con formatter: function() Commented el 17 jul. 2018 a las 22:26
  • Exactamente en la línea de abandono, cada punto tiene un valor Abandono: 1 000(0.0%) es aquí donde quiero poner el porcentaje Commented el 17 jul. 2018 a las 22:32
  • 1
    De acuerdo a la documentacion de highcharts, el porcentaje solo esta disponible en las series stacked y en los pie: api.highcharts.com/highcharts/tooltip.formatter
    – alanfcm
    Commented el 17 jul. 2018 a las 22:42
  • En la documentación de Highcharts se indica que percentage es para puntos en un stacked series o pie. Pero estás usando una línea y parece que no funciona para eso (por ejemplo, si pones "pie" como tipo sí se verán los porcentajes, pero no como tu quieres).
    – Alvaro Montoro
    Commented el 17 jul. 2018 a las 22:43

1 respuesta 1

3

Si tienes la opcion de manipular los datos, puedes hacerlo asi:

var recibidas = [7128,5067,5816,6005,6569,7260];
var atendidas = [5664,4820,5456,5401,5846,5503];

Highcharts.chart('container', {
    title: {
        text: 'Inbound'
    },
    xAxis: {
        categories: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'junio']
    },
    labels: {

    },
    series: [{
        type: 'column',
        name: 'Llamadas Recibidas',
        data: recibidas
    }, {
        type: 'column',
        name: 'Llamadas Atendidas',
        data: atendidas
    }, {
        type: 'column',
        name: 'Llamadas Abandonadas',
        data: [1463,159,360,603,722,1757]
    }, {
        type: 'line',
        name: 'Abandono',
        data: [1463,159,360,603,722,1757],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        }
    }, ],
    tooltip: {
           formatter: function() {
             if (this.series.name == 'Abandono') {
               var index = this.series.data.indexOf( this.point );
               var percentage = 100 - (atendidas[index] * 100) / recibidas[index];
               return this.series.name +  '<b>' + this.point.y + '</b><br>' + percentage.toFixed(2) + '%'
             } else {
               return this.series.name +  '<b>' + this.point.y + '</b>'
             }
           }
    },
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

3
  • Está casi perfecto, sólo si me apoyas a quitarle el mismo formatter a las barraS y dejarlo en la línea, te deposito hoy mismo :P Commented el 17 jul. 2018 a las 22:55
  • Ya edite, por ese simple if te voy a cobrar doble
    – alanfcm
    Commented el 17 jul. 2018 a las 23:00
  • 1
    Gracias, ya te mandé un camión de cervezas. Commented el 17 jul. 2018 a las 23:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.