在制表器中计算行和列的百分比

如何解决在制表器中计算行和列的百分比

这是我的制表机

因为我放置了两个单选按钮，它们将计算百分比。 一个将计算百分比行明智，其他将计算百分比列明智。 这意味着在 row Wise 中，男性和女性的百分比将被添加，男性和女性的相应百分比将由此得出。在列中，男性的总数将被添加，然后我们将获得每个地区的男性百分比。 我无法在制表器中找到任何方法来执行此操作。请帮我解决。

我的制表符代码是

initTable = function (data) {
var headerMenu = function () {
    var menu = [];
    var columns = this.getColumns();
    for (let column of columns) {
        let icon = document.createElement("i");
        icon.classList.add("fa");
        icon.classList.add(column.isVisible() ? "fa-check-square" : "fa-square");
        let label = document.createElement("span");
        let title = document.createElement("span");
        title.textContent = " " + column.getDeFinition().title;
        label.appendChild(icon);
        label.appendChild(title);
        menu.push({
            label: label,action: function (e) {
                e.stopPropagation();
                column.toggle();
                if (column.isVisible()) {
                    icon.classList.remove("fa-square");
                    icon.classList.add("fa-check-square");
                } else {
                    icon.classList.remove("fa-check-square");
                    icon.classList.add("fa-square");
                }
            }
        });
    }

    return menu;
};
if (data && Object.keys(data[0])) {
    let cols = [];
    Object.keys(data[0]) ? Object.keys(data[0]).map((v) => {
        if (v != "Geom" && v != "Query" && v != "Additional") {
            cols.push({
                title: v,field: v,formatter: function (cell) {
                    var value = cell.getValue();
                    if (checkKeyInFilters(cell.getField(),data[0].Query.Filters)) {
                        return "<span style='color:#53bfd4; font-weight:bold;'>" + value + "</span>";
                    } else {
                        return "<span>" + value + "</span>";
                    }
                },headerMenu: headerMenu,//topCalc: (!checkKeyInFilters(v,data[0].Query.Filters) ? "sum" : undefined)
            });
        }
        return v;
    }) : undefined;
    window.tableAnalyis = new Tabulator("#analysis-table",{
        layout: "fitColumns",responsiveLayout: "collapse",data: data,columns: cols,});
}

}

解决方法

做到了！ 我所要做的就是创建一个新函数并通过获取表格数据来计算百分比。

代码是：

ChangeIntoPercentile = function (type) {
    const data2 = window.tableAnalyis.getData();
    var Male_Sum = 0;
    var Female_Sum = 0;
    R_Wise_Percentage = [];
    T_Wise_Percentage = [];
    C_Wise_Percentage = [];
    for (i = 0; i < data2.length; i++) {
        Male_Sum += data2[i].Male;
        Female_Sum += data2[i].Female;
    }
    if (type == 'rowwise') {
        for (i = 0; i < data2.length; i++) {

            R_Wise_Percentage.push({ "District": data2[i].District,"Male Percentage %": parseFloat((data2[i].Male / (data2[i].Male + data2[i].Female)) * 100).toFixed(2),"Female Percenatge %": parseFloat((data2[i].Female / (data2[i].Male + data2[i].Female)) * 100).toFixed(2) });

        }    
        let cols = [];
        Object.keys(R_Wise_Percentage[0]) ? Object.keys(R_Wise_Percentage[0]).map((v) => {
            if (v != "Geom" && v != "Query" && v != "Additional") {
                cols.push({
                    title: v,field: v,headerMenu: headerMenu,//topCalc: (!checkKeyInFilters(v,data[0].Query.Filters) ? "sum" : undefined)
                });
            }
            return v;
        }) : undefined

            window.tableAnalyis.setData = new Tabulator("#analysis-table",{
                layout: "fitColumns",responsiveLayout: "collapse",data: R_Wise_Percentage,columns: cols,});
        }   
    else if (type == 'columnwise') {       
        for (i = 0; i < data2.length; i++) {

            C_Wise_Percentage.push({ "District": data2[i].District,"Male Percentage %": parseFloat((data2[i].Male / Male_Sum) * 100).toFixed(2),"Female Percenatge %": parseFloat((data2[i].Female / Female_Sum) * 100).toFixed(2) });
        }
        let cols = [];
        Object.keys(C_Wise_Percentage[0]) ? Object.keys(C_Wise_Percentage[0]).map((v) => {
            if (v != "Geom" && v != "Query" && v != "Additional") {
                cols.push({
                    title: v,data[0].Query.Filters) ? "sum" : undefined)
                });
            }
            return v;
        }) : undefined

        window.tableAnalyis.setData = new Tabulator("#analysis-table",{
            layout: "fitColumns",data: C_Wise_Percentage,});
    }
    else if (type == 'totalwise') {

        Total_Pop = Male_Sum + Female_Sum
        for (i = 0; i < data2.length; i++) {

            T_Wise_Percentage.push({ "District": data2[i].District,"Male Percentage %": parseFloat((data2[i].Male / Total_Pop) * 100).toFixed(2),"Female Percenatge %": parseFloat((data2[i].Female / Total_Pop) * 100).toFixed(2) });
        }
        let cols = [];
        Object.keys(T_Wise_Percentage[0]) ? Object.keys(T_Wise_Percentage[0]).map((v) => {
            if (v != "Geom" && v != "Query" && v != "Additional") {
                cols.push({
                    title: v,data: T_Wise_Percentage,});
    }

         

    }

和 HTML 代码

 <input type="radio" id="RowWise" name="RowWise" value="RowWise" onchange ="ChangeIntoPercentile('rowwise')">
                <label for="RowWise">District Wise Male/Female Percentage</label><br>
                <input type="radio" id="ColumnWise" name="RowWise" value="ColumnWise" onchange ="ChangeIntoPercentile('columnwise')">
                <label for="ColumnWise">Get Column Wise Percentage for Male and Female</label><br>
                <input type="radio" id="TotalWise" name="RowWise" value="TotalWise" onchange ="ChangeIntoPercentile('totalwise')">
                <label for="TotalWise">Get Total Population Wise Percentage for Male and Female</label><br>