我有表格和 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
感谢您的帮助
最佳答案
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>
关于javascript - 如何在表格中显示每一行的堆栈条形图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60200187/