DataGear 数据可视化表格图表常用配置示例

原创已于 2024-12-11 15:33:58 修改 · 5.6k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#可视化 #数据可视化 #大数据 #数据分析 #echarts

于 2021-01-15 19:32:33 首次发布

BI 同时被 2 个专栏收录

43 篇文章

订阅专栏

数据可视化

43 篇文章

订阅专栏

本文介绍DataGear数据可视化看板中表格图表的配置方法，包括自定义列属性、排序、客户端分页等功能，帮助用户更好地定制展示效果。

DataGear 内置表格图表底层采用的是DataTable表格组件，在数据可视化看板中，可以通过dg-chart-options设置表格选项，具体选项可参考https://datatables.net/reference/option/，本文仅列出一些常用配置示例。

注意：下面这些配置示例需要DataGear-2.1.1及以上版本。

自定义列属性（标题、列宽、是否可排序等）

<script type="text/javascript">
var tableOptions=
{
  columns:
  [
    {
      //标题
      title: "自定义标题",
      
      //列宽："100px"、"20%"
      width: "100px",
      
      //是否可排序
      orderable: false,
      
      //是否可见
      visible: false
    },
    ...
  ]
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...

对于自定义列宽，如果上述width设置不起作用，可以尝试为tableOptions添加如下tableStyle内容：

<script type="text/javascript">
var tableOptions=
{
  columns:
  [
    {
      //列宽："100px"、"20%"
      width: "300px"
    },
    {
      width: "200px"
    },
    ...
  ],
  tableStyle:
  {
    table: {'table-layout':'fixed'}
  }
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...

排序

<script type="text/javascript">
var tableOptions=
{
  //开启排序
  ordering: true,
  
  //第一列升序、第二列降序
  order: [[ 0, 'asc' ], [ 1, 'desc' ]]
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...

客户端分页

<script type="text/javascript">
var tableOptions=
{
  //开启分页
  paging: true,
  
  //可选，自定义页大小下拉框
  lengthMenu: [ 10, 25, 50, 75, 100 ],
  
  //可选，默认页大小
  pageLength: 50
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...

固定列

<script type="text/javascript">
var tableOptions=
{
  fixedColumns:
  {
    //左边固定列数
    leftColumns: 1,
	
    //右边固定列数
    rightColumns: 1
  }
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...

添加序号列

<script type="text/javascript">
var tableOptions=
{
  //添加一个序号列
  processRenderOptions: function(options)
  {
    var columns = options.columns;
    
    columns.unshift(
    {
      title: "序号",
      orderable: false,
      data: "",
      render: function(value, type, row, meta)
      {
        return "";
      }
    });
  },
  
  //设置序号列值
  rowCallback: function(row, data, displayNum, displayIndex, dataIndex)
  {
    $("td:first", row).html(displayIndex);
  }
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...

自定义行样式

<script type="text/javascript">
var tableOptions=
{
  //根据数据自定义行背景色、前景色
  rowCallback: function(row, data, displayNum, displayIndex, dataIndex)
  {
    //需要根据实际data结构修改取值逻辑
    let value = data["COL_VALUE"];

    if(value < 80)
    {
      $(row).css("color", "black");
      $("td", row).css("background-color", "gray");
    }
    else if(value < 100)
    {
      $(row).css("color", "yellow");
      $("td", row).css("background-color", "green");
    }
    else
    {
      $(row).css("color", "white");
      $("td", row).css("background-color", "red");
    }
  }
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...

自定义单元格内容

<script type="text/javascript">
var tableOptions=
{
  //自定义单元格渲染函数
  //value 单元格值
  //name 单元格列名
  //rowIndex 单元格行索引
  //columnIndex 单元格列索引
  //row 单元格所在的行数据对象
  renderCell: function(value, name, rowIndex, columnIndex, row)
  {
    //第二行第一列为红色，第二列为蓝色
    if(rowIndex == 1)
    {
     if(columnIndex == 0)
      return "<span style='color:red'>"+value+"</span>";
      else
      return "<span style='color:blue'>"+value+"</span>";
    }
    else
    return value;
  }
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...

单元格不换行

...
<div dg-chart-widget="..." dg-chart-options="{
  tableStyle:{
    body:{
	  cell:{
	    'white-space': 'nowrap'
	  }
	}
  }
}"></div>
...

单元格保留原格式（换行、缩进等格式）

...
<div dg-chart-widget="..." dg-chart-options="{
  tableStyle:{
    body:{
	  cell:{
	    'white-space': 'pre-wrap'
	  }
	}
  }
}"></div>
...

或者

<script type="text/javascript">
var tableOptions=
{
  //自定义单元格渲染函数
  //value 单元格值
  //name 单元格列名
  //rowIndex 单元格行索引
  //columnIndex 单元格列索引
  //row 单元格所在的行数据对象
  renderCell: function(value, name, rowIndex, columnIndex, row)
  {
    return "<pre>" + value + "</pre>";
  }

};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...

透明背景色

...
<div dg-chart-options="{
    tableStyle:{
      head:{
        row: {'background-color': 'transparent'}
      },
      body:{
        rowOdd: {'background-color': 'transparent'},
        rowEven: {'background-color': 'transparent'}
      }
    }
  }" dg-chart-widget="..."></div>
...

单元格边框

...
<div dg-chart-options="{
  tableStyle:{
    table:{
      'border-collapse': 'collapse'
    },
    head:{
      cell:{
        'border': '1px solid red',
        'border-bottom': 'none'
      }
    },
    body:{
      cell:{
        'border': '1px solid red'
      }
    }
  }}" dg-chart-widget="..."></div>
...

自定义表头

<script type="text/javascript">
var tableOptions=
{
  headerCallback: function(thead){
    //表头第一列设为红色
    var firstTh = $("th:eq(0)", thead);
    firstTh.css("color", "red");
    
    //添加一行表头
    var api = this.api();
    var header = $(api.table().header());
    var tr = $("#customHead",header);
    if(tr.length == 0){
      header.append("<tr id='customHead'><th colspan='2' style='text-align:center;'>自定义表头</th></tr>");
    }
  }
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...

轮播

...
<div dg-chart-options="{carousel: true}" dg-chart-widget="..."></div>
...

官网地址：
http://www.datagear.tech

源码地址：
Gitee：https://gitee.com/datagear/datagear
Github：https://github.com/datageartech/datagear

大屏模板地址：
https://gitee.com/datagear/DataGearDashboardTemplate