如何使用DataGear制作按行滚动的轮播表格数据可视化看板

# 如何使用DataGear制作按行滚动的轮播表格数据可视化看板

## 前言

在数据可视化领域，动态展示表格数据是常见的需求。DataGear作为一款开源的数据可视化平台，提供了强大的看板制作功能。本文将详细介绍如何利用DataGear实现按行滚动的轮播表格效果，让静态数据"动起来"，提升数据展示的交互性和观赏性。

---

## 一、准备工作

### 1.1 环境部署
首先需要完成DataGear的安装：
1. 从官网（https://www.datagear.tech/）下载最新版本
2. 解压后执行启动脚本：
   ```bash
   # Windows
   startup.bat
   
   # Linux/macOS
   ./startup.sh

1. 访问 http://localhost:8080 进入系统

1.2 数据准备

假设我们有一个销售数据表：

CREATE TABLE sales_data (
    id INT PRIMARY KEY,
    region VARCHAR(50),
    product VARCHAR(50),
    sales_amount DECIMAL(10,2),
    quarter VARCHAR(10)
);

二、创建数据集

2.1 新建SQL数据集

1. 进入”数据集管理” → “新建” → “SQL数据集”
2. 填写基本信息：
   • 名称：销售数据轮播
   • 数据源：选择已配置的数据源
3. 编写查询SQL：

   
   SELECT region, product, sales_amount, quarter 
   FROM sales_data 
   ORDER BY quarter, sales_amount DESC
   

2.2 添加数据集参数（可选）

如需动态过滤数据，可以添加参数：

SELECT * FROM sales_data 
WHERE quarter = ${quarter} 
ORDER BY sales_amount DESC

三、设计轮播表格看板

3.1 创建新看板

1. 进入”看板管理” → “新建看板”
2. 设置看板属性：
   • 名称：销售数据轮播看板
   • 宽度：1200px
   • 高度：600px

3.2 添加表格图表

1. 点击”添加图表” → “表格”
2. 绑定之前创建的”销售数据轮播”数据集
3. 配置表格列：

   
   {
    "columns": [
      {"name": "region", "text": "地区"},
      {"name": "product", "text": "产品"},
      {"name": "sales_amount", "text": "销售额", "format": "#,##0.00"},
      {"name": "quarter", "text": "季度"}
    ]
   }
   

四、实现行轮播效果

4.1 添加定时刷新

1. 在看板编辑器中点击”属性”面板
2. 设置”自动刷新间隔”为3000毫秒

4.2 使用JS实现行滚动

在看板的HTML部分添加以下代码：

<script>
$(function(){
    // 获取表格对象
    let table = dg.charts["table1"].element.find("table");
    
    // 设置表格样式
    table.css({
        "width": "100%",
        "border-collapse": "collapse"
    });
    
    // 行轮播函数
    function rotateRows() {
        let firstRow = table.find("tr:first");
        firstRow.animate(
            {height: 0, opacity: 0},
            500,
            function(){
                firstRow.appendTo(table).show();
                table.find("tr").css({height: "", opacity: ""});
            }
        );
    }
    
    // 定时执行
    setInterval(rotateRows, 3000);
});
</script>

4.3 CSS美化表格

在看板的CSS部分添加样式：

/* 表格基本样式 */
table {
    font-family: Arial, sans-serif;
    border: 1px solid #ddd;
}

/* 表头样式 */
th {
    background-color: #4CAF50;
    color: white;
    padding: 12px;
    text-align: left;
}

/* 表格行样式 */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* 高亮当前行 */
tr.highlight {
    background-color: #ffe0b2 !important;
    transition: all 0.3s;
}

五、进阶优化技巧

5.1 添加悬停效果

修改JS代码增加鼠标交互：

// 添加行悬停效果
table.on("mouseenter", "tr", function(){
    $(this).addClass("highlight");
}).on("mouseleave", "tr", function(){
    $(this).removeClass("highlight");
});

5.2 动态数据加载

结合AJAX实现数据动态更新：

function refreshData() {
    $.ajax({
        url: "api/sales/latest",
        success: function(data){
            // 更新数据集
            dg.charts["table1"].dataSet.data = data;
            // 刷新图表
            dg.charts["table1"].refresh();
        }
    });
}

5.3 响应式布局

添加媒体查询适应不同屏幕：

@media (max-width: 768px) {
    table {
        font-size: 14px;
    }
    th, td {
        padding: 8px 5px;
    }
}

六、最终效果展示

完成后的看板将具有以下特点： 1. 每3秒自动向上滚动一行 2. 鼠标悬停行高亮显示 3. 自适应不同屏幕尺寸 4. 数据定时自动刷新

结语

通过DataGear的灵活配置和自定义JS/CSS，我们可以创建出专业级的动态数据可视化看板。行轮播效果特别适合展示需要强调时间维度的数据变化。读者可以根据实际需求调整滚动速度、动画效果等参数，打造更符合业务场景的数据展示方案。

提示：本文代码基于DataGear 4.1.0版本实现，不同版本可能需要适当调整。 “`

注：实际使用时需要： 1. 替换示例中的截图URL为真实图片 2. 根据实际数据库结构调整SQL查询 3. 可能需要调整JS选择器以匹配实际图表ID 4. 颜色和样式可根据企业VI系统自定义