将 HTML 表格转换为多系列图表答案

【问题标题】：HTML Table into Multi-Series Chart将 HTML 表格转换为多系列图表
【发布时间】：2021-06-15 00:31:03
【问题描述】：

有没有办法自动生成从html表格到多系列图表？使用 javascript 还是 jquery？
这是我的表格示例

| Category |    YYYY    |   YYYY   |   YYYY   |
| Asset    | 1,500.00   | 3,590.00 | 5,000.00 |
| Revenue  | 2,560.00   | 6,700.90 | 4,900.00 |
| Others   | 3,000.00   | 4,200.00 | 6,500.50 |

实际上，该表由 10-12 个类别组成，当我选择特定年份时，三 (3) 年列会动态变化，例如

| Category  | 2020 | 2019 | 2018 |

谢谢大家。

【问题讨论】：

首先选择一个图表库，以便了解所需的数据结构。映射表行数据并不难，但需要先知道首选结构

标签： javascript html jquery

【解决方案1】：

通过添加这些脚本

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

并与 AJAX 一起插入代码。像这样的

$(function () {
                var chartdata={
                    table: 'highchart'
                }
                var chartype = {
                    type: 'column'
                }
                var chartitle = {
                    text: 'Revenue '+yy + ' vs ' + (yy-1) + ' vs ' + (yy-2)
                }
                var chartyaxis = {
                    allowDecimals: false,
                    title: {
                        text: 'Units'
                    }
                }
                var chartooltip = {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.point.y + ' ' + this.point.name.toLowerCase();
                    }
                }
                $('#chartContainer2').highcharts({
                    data:chartdata,
                    chart:chartype,
                    title: chartitle,
                    yAxis: chartyaxis,
                    tooltip: chartooltip
                });
            });

它只会接受和读取没有逗号（，）的数字

【讨论】：