使用 jQuery DataTables 进行数据可视化

Posted 2023-05-09

【中文标题】使用 jQuery DataTables 进行数据可视化

【英文标题】：Data visualisation using jQuery DataTables

【发布时间】：2021-09-18 08:30:42

【问题描述】：

我试图使用 DataTables 插件来进行数据可视化工作。从网站上我们可以看到结果：

这里是链接：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>

有人知道吗？或者有没有更好的可视化插件？

【问题讨论】：

请提供将出现在行中的样本或示例数据。

您的代码似乎使用了名为 <RichtigeRate> 的东西 - 但它应该使用 HTML <progress> 元素 - 请参阅 here。

【参考方案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