使用 jQuery DataTables 进行数据可视化

Question

我正在尝试使用 DataTables 插件来实现数据可视化。从网站上我们可以看到结果：

这里是link：https://datatables.net/examples/basic_init/data_rendering.html

我也想让它在我的 Laravel 项目中工作，这是我的结果：

但什么也没发生。我想也许数据来源不同？

这是我的观点：

<table id="statisticforstudent" class="table-responsive" style="width:100%">
  <thead>
    <th>Kapitel</th>
    <th>RichtigeRate</th>
  </thead>
  <tbody>
  @foreach($statistic_students as $value)
    <tr>
      <td>{{$value -> chapters_id}}</td>
      <td>{{$value -> correct_rate_stu}}</td>
    </tr>
  @endforeach                   
  </tbody>                                           
</table>

和我的 JavaScript:

<script>
        $(document).ready( function () {
            $('#statisticforstudent').DataTable({
               "paging":   true,
               "ordering": false,
               "info":     false,
               "bLengthChange": false,
               //"iDisplayLength" : 10,
               //lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
               //"scrollY":        "200px",
               //"scrollCollapse": true,
               // "paging":         false
               //"pagingType": "full_numbers",
               select: false,
               searching : false,
               columns: [
               {
                data: 'correct_rate_stu',
                render: function(data, type, row, meta) {
                    return type === 'display' ?
                        '<RichtigeRate="' + data + '" max="1"></RichtigeRate>' :
                        data;
                }
               ]
            },
            });
        });
      </script>

有人有想法吗？或者谁有更好的可视化插件？

Answer 1

考虑以下示例。

$(function() {
  $('#statisticforstudent').DataTable({
    "paging": true,
    "ordering": false,
    "info": false,
    "bLengthChange": false,
    select: false,
    searching: false,
    columns: [{
      name: "Kapitel"
    }, {
      name: "RichtigeRate",
      render: function(data, type, row, meta) {
        return type === 'display' ?
          '<progress value="' + data + '" max="1"></progress>' :
          data;
      }
    }]
  });
});

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<table id="statisticforstudent" class="table-responsive" style="width:100%">
  <thead>
    <th>Kapitel</th>
    <th>RichtigeRate</th>
  </thead>
  <tbody>
    <tr>
      <td>1001</td>
      <td>0.1234</td>
    </tr>
    <tr>
      <td>1002</td>
      <td>0.2500</td>
    </tr>
    <tr>
      <td>1003</td>
      <td>0.3333</td>
    </tr>
  </tbody>
</table>

这似乎有效，并按照您提供的数据表示例中的建议使用了 <progress> 元素。

查看更多：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

使用 jQuery DataTables 进行数据可视化

Data visualisation using jQuery DataTables

jquery

datatables

laravel