Как отобразить Stackbarchart в строке foreach таблицы, используя yajra Datatable? - PullRequest
Новая
       58

Как отобразить Stackbarchart в строке foreach таблицы, используя yajra Datatable?

0 голосов
/ 14 февраля 2020

Я уже спрашивал об этом на этой странице stackoverflow.com / questions / 60200187 , и попробуйте следовать ответу, и это работает. Но когда я добавляю 3 столбца, панель стека неверна, панель стека не совпадает с суммой MD, суммой LR и суммой LB. Как показано ниже. enter image description here Что я хочу сделать, это enter image description here Как это исправить, чтобы панель стека соответствовала значению MD, LR и LB? Вот мой код Спасибо за помощь. 

<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_materialloss}}</td>
    <td>{{$laka->total_accident}}</td>
    <td>{{$laka->total_md}}</td>
    <td>{{$laka->total_lb}}</td>
    <td>{{$laka->total_lr}}</td>
    <td>{{$laka->total_korban}}</td>
    <td></td> <!--StackBarChart-->
</tr>
@endforeach
</tbody>
</table>

и javascript

<script type="text/javascript">
function getInt(n) {
    var parsed = parseInt(n);
    return isNaN(parsed) ? 0 : parsed;
}
$(function() {
   $("#dTable").dataTable({
       "columns": [{
                    "title": "Name"
                },
                {
                    "title": "Total Material Loss"
                },
                {
                    "title": "Total Kecelakaan"
                },
                {
                    "title": "Total MD"
                },
                {
                    "title": "Total LR"
                },
                {
                    "title": "Total LB"
                },
                {
                    "title": "Total Korban"
                },
                {
                    "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));
                        //alert(total);

                        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")
                    }
                }
                ]
      });
  });
</script>

стиль 

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