Question

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

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

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

从本质上讲，这是一家公司名称，其收入同比增长数字（％）。

我要实现的是类似于MS Excel的条件格式设置功能，该功能在百分比单元格内使用displays彩色条（条的颜色为负值是红色，为正值是绿色，并且其大小被标准化为最小值/最大值和列宽）。

到目前为止，我的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方法，因此，如果您能指出正确的方向，我将不胜感激。

Answer 1

您可以使用render回调在生长列的单元格内创建条形图。

您必须在数据集中找到最大的增长量。
在渲染回调中：

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>

DataTables条件格式栏

1 个答案: