javascript - 如何在表格中显示每一行的堆栈条形图？

Question

我有表格和 5 列，其中一列中有 StackBarChart。基本上我想做的是这个。 有没有办法循环图表并为每一行显示一个图表？我引用这个link但还是没用

下面是我的代码

<table class="table">
<tr>
            <th>Name</th>
            <th>Total MD</th>
            <th>Total LR</th>
            <th>Total LB</th>
            <th> Graph</th>
</tr>
@foreach($detail_laka as $laka)
  </tr>
     <td>{{$laka->name}}</td>
     <td>{{$laka->total_md}}</td>
     <td>{{$laka->total_lb}}</td>
     <td>{{$laka->total_lr}}</td>
     <td></td> <!--StackBarChart-->
  </tr>
@endforeach

感谢您的帮助

Answer 1

JSFiddle我想我大部分时间都在工作，你可能需要稍微调整一下，但图表应该可以工作。

.bar-chart-bar {
  background-color: #e8e8e8;
  display: block;
  position: relative;
  width: 100%;
  height: 20px;
}

.bar {
  float: left;
  height: 100%;
}

.bar1 {
  background-color: green;
}

.bar2 {
  background-color: yellow;
}

.bar3 {
  background-color: red;
}

.squareRed {
  display: inline-block;
  height: 10px;
  width: 10px;
  background-color: red;
}

.squareGreen {
  display: inline-block;

  height: 10px;
  width: 10px;
  background-color: green;
}

.squareYellow {
  display: inline-block;

  height: 10px;
  width: 10px;
  background-color: yellow;
}

.ib {
  display: inline-block;
}

function getInt(n) {
  var parsed = parseInt(n);
  return isNaN(parsed) ? 0 : parsed;
}

$(function() {
  $("#dTable").dataTable({
    "columns": [{
        "title": "Name"
      },
      {
        "title": "Total MD"
      },
      {
        "title": "Total LR"
      },
      {
        "title": "Total LB"
      },
      {
        "title": "Graph",
        "sortable": false,
        "render": function(data, type, row, meta) {
          return $("<div></div>", {
            "class": "bar-chart-bar"
          }).append(function() {
            var bars = [];
            var total = row.reduce((a, c) => getInt(a) + getInt(c));
            for (var i = 1; i < row.length; i++) {
              bars.push($("<div></div>", {
                "class": "bar " + "bar" + i
              }).css({
                "width": (row[i] / total) * 100 + "%"
              }))
            }
            return bars;
          }).prop("outerHTML")
        }
      }
    ]
  });
});

<table id="dTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <tbody>
        @foreach($detail_laka as $laka)
        </tr>
        <td>{{$laka->name}}</td>
        <td>{{$laka->total_md}}</td>
        <td>{{$laka->total_lb}}</td>
        <td>{{$laka->total_lr}}</td>
        <td></td> <!--StackBarChart-->
        </tr>
        @endforeach
    </tbody>
      <tfoot>
    <tr>
      <th colspan="5" style="text-align:right">
        <div class="ib">MD: </div>
        <span class="squareRed"></span>
        <div class="ib">LR: </div>
        <span class="squareGreen"></span>
        <div class="ib">LB: </div>
        <span class="squareYellow"></span>
      </th>
    </tr>
  </tfoot>
</table>