我尝试做的是在数据表中呈现条形图。我正在使用 Highchart 和 DataTable jquery 插件。基本上我想做的就是这个。看看下面的链接。
我有一个包含 3 列的表格，其中一列中有条形图。该表是可排序的，并且它具有分页以显示更多行。所有人都很难过，有没有办法以某种方式循环遍历图表系列并显示一个用于吃的行。
感谢您的帮助
【问题讨论】：
标签： javascript jquery charts highcharts datatable
我不会使用外部库来创建图表，而是使用 CSS。这个来自Russriguez 的answer 提示我查看您可能使用的CSS。这是一个似乎有效的基本示例，位于JSFiddle：
<table id="dTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Languages</th>
<th>Votes</th>
<th>Positive/Neutral/Negative</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Languages</th>
<th>Votes</th>
<th>Positive/Neutral/Negative</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>English</td>
<td>49</td>
<td>
<div class="bar-chart-bar">
<div class="bar bar1 bar-50"></div>
<div class="bar bar2 bar-20"></div>
<div class="bar bar3 bar-25"></div>
</div>
</td>
</tr>
<tr>
<td>German</td>
<td>33</td>
<td>
<div class="bar-chart-bar">
<div class="bar bar1 bar-25"></div>
<div class="bar bar2 bar-10"></div>
<div class="bar bar3 bar-12"></div>
</div>
</td>
</tr>
<tr>
<td>French</td>
<td>28</td>
<td>
<div class="bar-chart-bar">
<div class="bar bar1 bar-20"></div>
<div class="bar bar2 bar-20"></div>
<div class="bar bar3 bar-17"></div>
</div>
</td>
</tr>
<tr>
<td>Spanish</td>
<td>16</td>
<td>
<div class="bar-chart-bar">
<div class="bar bar1 bar-22"></div>
<div class="bar bar2 bar-4"></div>
<div class="bar bar3 bar-10"></div>
</div>
</td>
</tr>
</tbody>
</table>
当然，如果您的数据不是这种格式，那可能会很有趣，因为您需要在进行过程中对其进行格式化。但是，如果是这样，那么您就在笑，只要您能够做一些数学运算来计算出百分比……实际上，堆叠条的内联 CSS 可能会使事情变得更容易并精简您的外部 CSS。
编辑
我开始考虑您的数据以及是否采用这种格式：
<table id="dTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Languages</th>
<th>Positive</th>
<th>Neutral</th>
<th>Negative</th>
</tr>
</thead>
<tbody>
<tr>
<td>English</td>
<td>50</td>
<td>20</td>
<td>25</td>
</tr>
<tr>
<td>German</td>
<td>25</td>
<td>10</td>
<td>12</td>
</tr>
<tr>
<td>French</td>
<td>20</td>
<td>20</td>
<td>17</td>
</tr>
<tr>
<td>Spanish</td>
<td>22</td>
<td>4</td>
<td>10</td>
</tr>
</tbody>
</table>
那么这对你有用：
$(function(){
$("#dTable").dataTable({
"columns": [
{
"title":"Languages"
},
{
"title":"Votes",
"render": function(data, type, row, meta){
return parseInt(row[1], 10) + parseInt(row[2], 10) + parseInt(row[3], 10)
}
},
{
"visible":false
},
{
"title": "Positive/Neutral/Negative",
"sortable":false,
"render": function(data, type, row, meta){
return $("<div></div>", {
"class": "bar-chart-bar"
}).append(function(){
var bars = [];
for(var i = 1; i < Object.keys(row).length; i++){
bars.push($("<div></div>",{
"class": "bar " + "bar" + i
}).css({
"width": row[i] + "%"
}))
}
return bars;
}).prop("outerHTML")
}
}
]
});
});
还有精简 CSS 文件的额外好处 ;-)
工作JSFiddle。
【讨论】：
我从以前的解决方案中得出另一个解决方案。我的想法是使用 Peity 图表而不是 CSS 代码。
相同的 HTML 代码
<table id="dTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Languages</th>
<th>Positive</th>
<th>Neutral</th>
<th>Negative</th>
</tr>
</thead>
<tbody>
<tr>
<td>English</td>
<td>50</td>
<td>20</td>
<td>25</td>
</tr>
<tr>
<td>German</td>
<td>25</td>
<td>10</td>
<td>12</td>
</tr>
<tr>
<td>French</td>
<td>20</td>
<td>20</td>
<td>17</td>
</tr>
<tr>
<td>Spanish</td>
<td>22</td>
<td>4</td>
<td>10</td>
</tr>
</tbody>
而 Javascript 略有不同，
$(function(){
$("#dTable").dataTable({
"columns": [
{
"title":"Languages"
},
{
"title":"Votes",
"render": function(data, type, row, meta){
return parseInt(row[1], 10) + parseInt(row[2], 10) + parseInt(row[3], 10)
}
},
{
"visible":false
},
{
"title": "Positive/Neutral/Negative",
"sortable":false,
"render": function(data, type, row, meta){
var sequence = '<span class="donut">'
for(var i = 1; i < row.length; i++){
sequence = sequence + parseInt(row[i], 10) + ',';
}
sequence = sequence + '</span>';
return sequence
}
}
]
});
});
$(function() {
$("span.donut").peity("donut")
})
没有使用 CSS。
Fiddle的链接
【讨论】：