如何反转（转置）从 Angular 12 中的高脚椅动态生成的 HTML 表格的行和列？答案

【问题标题】：How to invert (transpose) the rows and columns of an HTML table which is generated dynamically from highchair in Angular 12?如何反转（转置）从 Angular 12 中的高脚椅动态生成的 HTML 表格的行和列？
【发布时间】：2022-01-06 08:13:26
【问题描述】：

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/export-data/showtable/

在上面的例子中，我使用下面的代码创建了 highchart 表。

Highcharts.chart('container', {

title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
},

subtitle: {
    text: 'A demo of displaying a data table in Highcharts'
},

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

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

yAxis: {
    title: {
        text: 'Number of Employees'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

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

series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],

exporting: {
    showTable: true
}

});

以上部分，

 exporting: {
        showTable: true
    }

这部分负责生成highchart数据表。我得到的表应该恢复，即行到列，列到行。

我已经尝试使用 javascript dom 操作来转换它，但我需要一些特定的方法只用于 highchart。

【问题讨论】：

标签： javascript angular highcharts

【解决方案1】：

在 API 内部没有只为导出表切换行和列的功能。模块数据data.switchRowsAndColumns 中的所有数据都可以更改，但我认为这不是您的情况。

你可以尝试换核心，使用扩展方式how to extending Highcharts

在https://code.highcharts.com/modules/export-data.src.js 中找到这个Chart.prototype.getTableAST

显示如何包装核心并更改导出时创建表的方式的旧版本示例：https://jsfiddle.net/BlackLabel/npwjxkuL/

【讨论】：