☰

从 awk 脚本的输出创建 html

tag-icon • tag-icon command-line text-processing awk html
从 awk 脚本的输出创建 html

我正在 awk 脚本中执行数据集中的一系列聚合，并得到以下内容。

现在我想创建一个 html，以表格的形式收集先前的输出，并根据 a、b、c 的值制作条形图。我希望​​ html 的代码也包含在这个脚本中。

更新数据集样本以生成聚合

Bel,BLR,897,965322,6844,102217,725,
Bel,BEL,976,3851048,30826,329772,
Ben,BEN,9765,26952,163,2126,13,
Bot,BWA,976,305526,2686,125488,1103,
Cabo,CPV,9865,55960,401,98772,708,

更新聚合数据输出

7,5.23,6.36,0.63
6,12.56,24.64,0.53 
9,0.63,32.8,3.35

我的脚本如下：


END {
                print "<html><body>"
                print "<table border=1>"
} NR == 1 {
                print "<tr>"
                print "<td><font face=verdana size=2 color=black>" $k "</font></td>"
                print "<td><font face=verdana size=2 color=black>" $c "</font></td>"
                print "<td><font face=verdana size=2 color=black>" $a "</font></td>"
                print "<td><font face=verdana size=2 color=black>" $aa "</font></td>"
                print "<td><font face=verdana size=2 color=black>" $aaa "</font></td>"
                print "</tr>"
} NR > 1 {
                print "<tr>"
                print "<td><font face=verdana size=1>" $1 "</font></td>"
                print "<td><font face=verdana size=1>" $2 "</font></td>"
                print "<td><font face=verdana size=1>" $3 "</font></td>"
                print "</tr>"
} END {
                print "</table>"
                print "</body></html>"
}

> file.html

有什么方法可以实现这个吗？

答案1

HTML 本身无法“以表格形式收集先前的输出，并根据 a、b、c 的值制作条形图”。如果您希望在加载 html 页面时发生这种情况，则需要使用某种 Web 脚本语言。您没有提供详细信息，但如果数据处理是在 Web 服务器上进行的，则服务器端脚本语言包括 PHP、Python、Ruby、C# 和 JavaScript。对于客户端处理，javascript 很常见，但这通常非常不安全。

答案2

我将利用现有框架（例如Google Libraries API）来动态生成 html 图表。假设文件agreggated_data.csv包含显示的表格，请尝试以下操作：

#!/bin/bash
# generate strings based on the input file
str1=$(awk -F, '
    NR==1 {
        printf "\t[%s,", "\047" "\047"
        for (i = 3; i <= NF; i++) {
            printf "%s%s", "\047" $i "\047", i == NF ? "],\n" : ","
        }
    }
    NR>1 {
        printf "\t[%s,", "\047" $1 "\047"
        for (i = 3; i <= NF; i++) {
            printf "%s%s", $i, i == NF ? "],\n" : ","
        }
    }
' aggregated_data.csv)

str2=$(awk -F, '
    NR>1 {
        printf "    formatter3.format(data3,%d);\n", ++n
    }
' aggregated_data.csv)

# embed generated strings in the template to create "file.html"
cat <<EOS > file.html
<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
// load api
google.load('visualization', '1.0', {'packages':['corechart']});

// callback
google.setOnLoadCallback(drawChart);

// function to draw the graph
function drawChart(){
    var data3 = google.visualization.arrayToDataTable([
$str1
    ]);

    var formatter3 = new google.visualization.NumberFormat({
        pattern: '#,###.##'
    });
$str2

    var options3 = {
        chartArea: {width:'55%', height:'75%',left:50},
        colors:['#4477cc','#55cc55','#ff7788'],
        legend: {position:'right'},
        fontName:"sans-serif",
        tooltip:{textStyle:{bold:'false'}},
        bar:{groupWidth:"70%"},
        hAxis:{
            textStyle:{fontSize:11}
        },
        vAxis:{
            format:'#,###.##',
            gridlines: {count:6},
            textStyle:{fontSize:11}
        },
        isStacked:true,
        backgroundColor:'transparent'
    };

    var chart3 = new google.visualization.ColumnChart(document.getElementById('Chart3'));
    chart3.draw(data3, options3);
}
</script>

<style type="text/css">
.chart{
    width:450px;
    height:350px;
}
</style>

</head>
<body>
    <div class="chartBox">
    <div id="Chart3" class="chart"></div>
    </div>
</body>
</html>
EOS

这是生成的图表（file.html）。

生成的图表

由于我不确定您想要的图表布局/视图（例如我们如何使用的值Total），因此欢迎提供更多反馈。

相关内容