时间戳

首页 > 解决方案 > DataTables 条件格式栏

javascript - DataTables 条件格式栏

问题描述

我开发了使用数据表来可视化某些统计数据的应用。

我从 API 收到以下格式的数据：

{
    "data": [{
        "companyName": "company1",
        "growth": 15
    },
    {
        "companyName": "company2",
        "growth": -8
    },
    {
        "companyName": "company3",
        "growth": 23
    }]
}

这本质上是一个公司名称及其同比收入增长数字 (%)。

我想实现的是一个类似于 MS Excel 的条件格式功能，它在百分比单元格内显示彩色条（条的颜色为红色表示负数，绿色表示正值，其大小标准化为最小/最大值和列宽） .

到目前为止，我的 HTML 是：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js" charset="utf8"></script>  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<table id="revenue-growth"></table>

和 jQuery：

$('#revenue-growth').DataTable({
    ajax: {
        url: 'https://192.168.0.1/revenue',
        method: 'GET',
        dataSrc: 'data'
    }
    dom: 'Bfrtip',
    pageLength: 50,
    order: [0, 'asc']
    columDefs: [{
            targets: 0,
            data: 'companyName',
            title: 'Company Name'
        }, {
            targets: 1,
            data: 'growth',
            title: 'YoY revenue growth, %'
        }
    ]
})

所以，我的问题是：有没有办法从头开始实现这样的功能，或者，也许已经有插件可以做到这一点？

我在stackoverflow上没有找到任何符合我要求的东西，我也无法识别可以解决我的问题的DataTables API方法，所以如果你能指出我正确的方向，我将不胜感激。

标签： javascriptjquerydatatables

解决方案

您可以使用render-callback 在增长列的单元格内创建条形图。

  1. 您必须找到数据集中的最大增长。

  2. 在渲染回调中：

    2.1。检查增长是负数还是正数。

    2.2. 根据增长和最大值计算条宽-%。

    2.3. 根据这些信息创建和附加元素。

这是一个简单的例子：

$(document).ready(function() {
  
  const dataSet = [
    { companyName: "Company A", growth: -12 },
    { companyName: "Company B", growth:  31 },
    { companyName: "Company C", growth:   7 },
    { companyName: "Company D", growth:   0 },
    { companyName: "Company E", growth: -29 },
    { companyName: "Company F", growth:  23 },
  ];
  
  // Get absolute maximum value of grwoth from dataset
  const maxGrowthValue = Math.max.apply(Math, dataSet.map(function(item) { return Math.abs(item.growth); }));
  
  const table = $('#example').DataTable({
    data: dataSet,
    columns: [
      {
        data: 'companyName',
        title: "Company Name",
      },
      {
        data: 'growth',
        title: "YoY revenue growth, %",
        // Custom render the cell of the growth-column
        render: (data, type, row, meta) => {
          const isPositive = (Number(data) > 0);
          const barWidth = 100 / maxGrowthValue * Math.abs(Number(data)) * 0.5;
          const $growthBarContainer = $('<div>', {
            class: "growth-bar",
          });
          const $growthBar = $('<div>', {
            class: "bar bar-" + (isPositive ? 'positive' : 'negative'),
          });
          $growthBar.css({
            width: barWidth.toFixed(2) + '%',
          });
          $growthBarContainer.append($growthBar);
          $growthNumber = $('<div>', {
            class: "growth-number",
          });
          $growthNumber.text(data + '%');
          $growthBarContainer.append($growthNumber);
          return $growthBarContainer.prop("outerHTML");
        },
      },
    ],
  });
  
});
.growth-bar {
  display: inline-block;
  width: 120px;
  height: 12px;
  position: relative;
  background-color: #eee;
  border: 1px solid #424242;
}

.growth-bar > .bar {
  width: 0%;
  height: 100%;
  position: absolute;
}

.growth-bar > .bar.bar-negative {
  right: 50%;
  background-color: red;
}

.growth-bar > .bar.bar-positive {
  left: 50%;
  background-color: green;
}

.growth-bar > .growth-number {
  position: absolute;
  top: 1px;
  right: 2px;
  color: #fff;
  /* shadow for better readability */
  text-shadow: 0px -1px 0px rgba(0,0,0,.5), 0px 1px 0px rgba(0,0,0,.5), -1px 0px 0px rgba(0,0,0,.5), 1px 0px 0px rgba(0,0,0,.5), 0px 0px 1px rgba(0,0,0,.25), 0px 0px 2px rgba(0,0,0,.5), 0px 0px 3px rgba(0,0,0,.75);
  font-size: 10px;
  line-height: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%"></table>

推荐阅读