Skip to main content
se añadieron 186 caracteres en el cuerpo
Origen Enlace
alanfcm
  • 20.9k
  • 11
  • 19
  • 35
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>
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() {
             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) + '%'
           }
    },
});
<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>
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>
Origen Enlace
alanfcm
  • 20.9k
  • 11
  • 19
  • 35

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() {
             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) + '%'
           }
    },
});
<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>