Question

我有一个包含一些数据的HTML表。我正在将这些数据转换为百分比，以将其填充到UI上的HTML表中。

到目前为止我所做的：

使用基本公式来计算百分比，即(no./total)100
这给我正确的标题行结果，即一行。
对于第二行，我正在应用相同的公式，但是得到了一些错误的结果

代码段

const data = [
  {
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 104801,
    "billdate": "2018-08-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 138151,
    "billdate": "2018-08-04",
    "outlet": "KOLAR"
  },
  {
    "amount": 628358,
    "billdate": "2018-08-05",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 115223,
    "billdate": "2018-08-05",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 134107,
    "billdate": "2018-08-05",
    "outlet": "KOLAR"
  },
  {
    "amount": 177866,
    "billdate": "2018-08-06",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 66095,
    "billdate": "2018-08-06",
    "outlet": "KOLAR"
  }
]

const formatData = function(data) {
  const billdates = []
  const outlets = []
  data.forEach(element => {
    if (billdates.indexOf(element.billdate) == -1) {
      billdates.push(element.billdate)
    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.push(element.outlet)
    }
  })
  return {
    data,
    billdates,
    outlets,
  }
}

const renderTable = function(data) {
  billdates = data.billdates
  outlets = data.outlets
  data = data.data
  const tbl = document.getElementById('tbl')
  const table = document.createElement('table')
  const thead = document.createElement('thead')
  let headerRow = document.createElement('tr')
  let th = document.createElement('th')
  th.innerHTML = 'Bill_____Date'
  headerRow.appendChild(th)
  let grandTotal = 0
  const outletWiseTotal = {}
  th = document.createElement('th')
  th.innerHTML = 'Total1'
  headerRow.appendChild(th)
  outlets.forEach(element => {
    th = document.createElement('th')
    th.innerHTML = element

    headerRow.appendChild(th)
    outletWiseTotal[element] = 0
    data.forEach(el => {
      if (el.outlet == element) {
        outletWiseTotal[element] += parseInt(el.amount)
      }
    })
    grandTotal += outletWiseTotal[element]
  })
  thead.appendChild(headerRow)
  headerRow = document.createElement('tr')
  th = document.createElement('th')
  th.innerHTML = 'Total'
  headerRow.appendChild(th)

  outlets.forEach(element => {
    th = document.createElement('th')
    //   console.log(outletWiseTotal[element]);
    const test = (outletWiseTotal[element] / grandTotal) * 100
    const fix = `${test.toFixed(2)}%`
    console.log(fix) // this one is giving me right result for row "Total"
    th.innerHTML = fix
    th.classList.add('text-right')
    // ol wise total

    headerRow.appendChild(th)
  })
  th = document.createElement('th')
  th.innerHTML = '100%' // grandTotal
  th.classList.add('text-right')
  // grand total
  headerRow.insertBefore(th, headerRow.children[1])
  thead.appendChild(headerRow)
  table.appendChild(thead)

  const tbody = document.createElement('tbody')
  billdates.forEach(element => {
    const row = document.createElement('tr')
    td = document.createElement('td')
    td.innerHTML = element
    row.appendChild(td)
    let total = 0
    outlets.forEach(outlet => {
      let el = 0
      data.forEach(d => {
        if (d.billdate == element && d.outlet == outlet) {
          total += parseInt(d.amount)
          el = d.amount
        }
      })
      td.classList.add('text-right')
      const test1 = (el / total) * 100
      console.log(test1) // this one is giving some wrong result for first column it is giving 100% which is wrong
      td = document.createElement('td')
      td.innerHTML = el.toLocaleString('en-in')
      row.appendChild(td)
    })

    td = document.createElement('td')
    td.innerHTML = '100%' // total date wise
    td.classList.add('text-right')
    console.log(total) // total date wise

    row.insertBefore(td, row.children[1])
    tbody.appendChild(row)
  })

  table.appendChild(tbody)
  tbl.innerHTML = ''
  tbl.appendChild(table)
  table.classList.add('table')
  table.classList.add('table-striped')
  table.classList.add('table-bordered')
}
const formatedData = formatData(data)
renderTable(formatedData)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="tbl"></div>

请查看代码段；为了进一步说明，我在其中放置了控制台，其中提供了100
我的表是完全动态的。

我使用了正确的方法，但是得到了一些错误的数据。

Answer 1

检查此更新的代码

var data = [{"amount":518212,"billdate":"2018-08-04","outlet":"JAYANAGAR"},{"amount":104801,"billdate":"2018-08-04","outlet":"MALLESHWARAM"},{"amount":138151,"billdate":"2018-08-04","outlet":"KOLAR"},{"amount":628358,"billdate":"2018-08-05","outlet":"JAYANAGAR"},{"amount":115223,"billdate":"2018-08-05","outlet":"MALLESHWARAM"},{"amount":134107,"billdate":"2018-08-05","outlet":"KOLAR"},{"amount":177866,"billdate":"2018-08-06","outlet":"JAYANAGAR"},{"amount":66095,"billdate":"2018-08-06","outlet":"KOLAR"}]
    /*var data = [
  {
    amount: 518212,
    billdate: '2018-08-04',
    outlet: 'JAYANAGAR',
  },
  {
    amount: 104801,
    billdate: '2018-08-04',
    outlet: 'MALLESHWARAM',
  },
  {
    amount: 138151,
    billdate: '2018-08-04',
    outlet: 'KOLAR',
  },
]
*/

    let formatData = function (data) {
        let billdates = [];
        let outlets = [];
        data.forEach(element => {
            if (billdates.indexOf(element.billdate) == -1) {
                billdates.push(element.billdate);
            }
            if (outlets.indexOf(element.outlet) == -1) {
                outlets.push(element.outlet);
            }
        });
        return {
            data: data,
            billdates: billdates,
            outlets: outlets,

        };
    };

    let renderTable = function (data) {
        billdates = data.billdates;
        outlets = data.outlets;
        data = data.data;
        let tbl = document.getElementById("tbl");
        let table = document.createElement("table");
        let thead = document.createElement("thead");
        let headerRow = document.createElement("tr");
        let th = document.createElement("th");
        th.innerHTML = "Bill_____Date";
        headerRow.appendChild(th);
        let grandTotal = 0;
        let outletWiseTotal = {};
        th = document.createElement("th");
        th.innerHTML = "Total1";
        headerRow.appendChild(th);
        outlets.forEach(element => {
            th = document.createElement("th");
            th.innerHTML = element;

            headerRow.appendChild(th);
            outletWiseTotal[element] = 0;
            data.forEach(el => {
                if (el.outlet == element) {
                    outletWiseTotal[element] += parseInt(el.amount);
                }
            });
            grandTotal += outletWiseTotal[element];
        });
        thead.appendChild(headerRow);
        headerRow = document.createElement("tr");
        th = document.createElement("th");
        th.innerHTML = "Total";
        headerRow.appendChild(th);

        outlets.forEach(element => {
            th = document.createElement("th");
            //   console.log(outletWiseTotal[element]);
            var test = ((outletWiseTotal[element] / grandTotal) * 100);

            var fix = test.toFixed(2) + "%";
            console.log(fix)    // this one is giving me right result for row "Total"
            th.innerHTML = fix;
            th.classList.add("text-right");
            //ol wise total  

            headerRow.appendChild(th);
        });
        th = document.createElement("th");
        th.innerHTML = "100%" //grandTotal
        th.classList.add("text-right");
        // grand total
        headerRow.insertBefore(th, headerRow.children[1]);
        thead.appendChild(headerRow);
        table.appendChild(thead);

        let tbody = document.createElement("tbody");
        billdates.forEach(element => {
            let row = document.createElement("tr");
            td = document.createElement("td");
            td.innerHTML = element;
            row.appendChild(td);
            let total = 0;
            
            outlets.forEach(outlet => {
                let el = 0;
                let tempTotal = 0;
                data.forEach(d => {
                    if (d.billdate == element && d.outlet == outlet) {
                        total += parseInt(d.amount);
                        el = d.amount;
                    }
                    if (d.billdate == element){
                    tempTotal += parseInt(d.amount);
                }
                });
                
                td.classList.add("text-right");
                var test1 = ((el / tempTotal) * 100);
                console.log('(' + el + '/' + tempTotal + ')*100 == ' + test1)     //this one is giving some wrong result for first column it is giving 100% which is wrong
                td = document.createElement("td");
                td.innerHTML = el.toLocaleString('en-in');
                row.appendChild(td);
            });

            td = document.createElement("td");
            td.innerHTML = total;  //total date wise
            td.classList.add("text-right");
            //console.log(total) // total date wise

            row.insertBefore(td, row.children[1]);
            tbody.appendChild(row);
        });

        table.appendChild(tbody);
        tbl.innerHTML = "";
        tbl.appendChild(table);
        table.classList.add("table");
        table.classList.add("table-striped");
        table.classList.add("table-bordered");
    }
    let formatedData = formatData(data);
    renderTable(formatedData);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://code.jquery.com/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="tbl"></div>

Answer 2

当我分析您的代码时，它返回正确的记录，因为这是您的计算

var test1 = ((el / total) * 100);

并且第一次执行el和total的值相同时，这就是为什么它返回100％的原因。

检查我的以下日志

(index):119 (518212/518212)*100 == 100    
(index):119 (104801/623013)*100 == 16.821639355840087    
(index):119 (138151/761164)*100 == 18.14996505352329

您能告诉我什么是期望值和计算流程吗？

计算得出错误结果的百分比

2 个答案: