如何在表foreach行中显示stackbarchart? [英] How to display stackbarchart in table foreach row?

问题描述

我有表和5列，其中一列具有StackBarChart.基本上我想做的就是这个.有什么方法可以循环显示图表并为每一行显示一个?我引用了此链接，但仍然无法正常运行

I have table and 5 column and one of the columns has StackBarChart in it. Basicly what i want to do is this. Is there any way to loop chart and display one for each row? I refer to this link but still didn't work

下面是我的代码

<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

感谢您的帮助

推荐答案

JSFiddle 我想我大部分工作了，您可能需要稍作调整，但图表应该可以工作.

JSFiddleI think I got mostly working, you may need to tweak a little bit, but the chart should be working.

.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>

这篇关于如何在表foreach行中显示stackbarchart?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！