es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo invertir (trasponer) las filas y columnas de una tabla HTML generada dinámicamente desde highchair en Angular 12?

Cómo invertir (trasponer) las filas y columnas de una tabla HTML generada dinámicamente desde highchair en Angular 12?

04 Aug, 2023 Programación

En el ejemplo anterior, he creado la tabla de Highcharts utilizando el código siguiente.

Highcharts.chart('container', {

title: {
    text: 'Crecimiento del Empleo Solar por Sector, 2010-2016'
},

subtitle: {
    text: 'Una demostración de cómo mostrar una tabla de datos en Highcharts'
},

credits: {
    text: 'Fuente: thesolarfoundation.com'
},

chart: {
    borderWidth: 1,
    borderColor: '#ccc',
    spacingBottom: 30
},

yAxis: {
    title: {
        text: 'Número de Empleados'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

plotOptions: {
    series: {
        pointStart: 2010
    }
},

series: [{
    name: 'Instalación',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufactura',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Ventas & Distribución',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Desarrollo de Proyectos',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Otros',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],

exporting: {
    showTable: true
}

});

En la parte anterior,

exporting: {
        showTable: true
    }

esta parte es responsable de generar la tabla de datos de Highchart. La tabla que obtengo debe invertirse, es decir, las filas deben ser columnas y las columnas deben ser filas.

He intentando convertir esto utilizando la manipulación del DOM en JavaScript, pero necesito un enfoque específico para Highcharts solamente.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    La opción exporting en Highcharts permite generar una tabla basada en los datos del gráfico. Estableciendo showTable: true en las opciones de exportación, se genera la tabla. Sin embargo, puede ser necesario convertir la tabla, como intercambiar filas y columnas.

    Para lograr esto, se puede utilizar la función afterGetTable() disponible en la API de Highcharts. Esta función se llama después de generar la tabla y nos proporciona el elemento de la tabla. Luego podemos manipular el elemento de la tabla para obtener la salida deseada.

    Por ejemplo, para intercambiar filas y columnas, se puede recorrer las filas y columnas de la tabla y construir un nuevo elemento de tabla intercambiando filas y columnas.

    Aquí hay un ejemplo de implementación de la función afterGetTable() para intercambiar filas y columnas:

    exporting: {
  showTable: true,
  csv: {
    columnHeaderFormatter: function(item, key) {
      if (key === 0) {
        return 'Año';
      }
      return item;
    }
  },
  afterGetTable: function(table) {
    var rows = table.getElementsByTagName('tr');
    var cols = rows[0].getElementsByTagName('td');
    var newTable = document.createElement('table');
    for (var i = 0; i < cols.length; i++) {
      var newRow = newTable.insertRow(i);
      for (var j = 0; j < rows.length; j++) {
        var cellValue = rows[j].getElementsByTagName('td')[i].innerHTML;
        var newCell = newRow.insertCell(j);
        if (j === 0) {
          newCell.innerHTML = cols[i].innerHTML;
        } else {
          newCell.innerHTML = cellValue;
        }
      }
    }
    table.parentNode.replaceChild(newTable, table);
  }
}

    Se debe tener en cuenta que en el código anterior también hemos agregado la opción csv para personalizar las cabeceras del archivo CSV exportado.

    Este es solo un ejemplo de cómo se puede utilizar la función afterGetTable() para manipular la tabla generada. Existen muchas otras posibilidades según los requisitos específicos.

Comments are closed.