0

Es posible trazar una línea horizontal en chart.js con un sólo dato? en mi gráfica tengo el rendimeinto de los trabajadores y quiero sacar la media y mostrarlo en una linea horizontal, para que se vea en que número cae, porque una manera de hacerlo es punto por punto en un arreglo calculado la media y repitiendo, pero si alguien ha hecho esto antes me gustaría ver cómo lo hizo... éste es mi gráfico:

    var ctx = document.getElementById('myChart').getContext('2d');   

    var chart = new Chart(ctx, {
    type: 'line',

        data: {
            
            labels: ['Juan', 'Manuel', 'Martha', 'Abril'],
            datasets: [{
                label: 'Rendimiento',
                lineTension:0,
                borderColor: 'rgb(255, 99, 132)',
                data:[20,30, 40, 50]
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        suggestedMin: 0,
                        suggestedMax: 100,
                        stepSize: 5
                    }
                }]
            },
            title: {
                display: true,
                text: 'Trabajadores'
            }
        }
    });

1 respuesta 1

0

Podrías utilizar un segundo dataset.

Supongamos que asignas tu array de nombres a una variable llamada usuarios:

const usuarios = ['Juan', 'Manuel', 'Martha', 'Abril'];

Y también utilizas una función para calcular la media con los datos y asginas dicho valor a una variable llamada media.

Lo que tienes que hacer es agregar a data.datasets otro objeto:

datasets: [{
      label: 'Rendimiento',
      lineTension:0,
      borderColor: 'rgb(255, 99, 132)',
      data:[20,30, 40, 50]
  },
  {
    label: 'Media',//Este es el nombre en la leyenda
    fill: false, //Esto hace que no se rellene el area debajo de la línea
    radius: 0,//Esto hace que no se vean puntos para cada dato
    borderColor: 'rgb(255, 0, 0)',
    pointHitRadius: 0,//Esto evita que el tooltip aparezca cuando se pase el cursor encima de la línea
    data: usuarios.map( label=>(media))//Este map crea un array del tamaño de usuarios con el valor que especifiques para la variable media
}]

Espero que te sirva, no es la solución más elegante, pero funciona.

1
  • 1
    Muchas gracias, así lo haré, gracias por tu aporte el 27 oct. 2020 a las 23:46

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.