Line Up图形

简介 #

LineUp 是一款专为多维度综合评分排名设计的交互可视化图形，支持按多个指标动态排序、筛选和高亮。在 SmartChart 中通过加载 LineUp JS 库并传入对象数组数据即可使用，适合城市竞争力、产品评测等排名分析场景。

核心函数 说明
ds_loadcss('smt_LineUp') 加载 LineUp 样式
ds_loadjs('smt_LineUp') 加载 LineUp JS 库
ds_createMap_all(dataset) 将二维数组转为对象数组格式
LineUpJS.asTaggle() 初始化 LineUp 实例
EVENT_SELECTION_CHANGED 行选中事件，可触发联动

应用场景 #

LineUp 是一种专为多属性排名可视化设计的交互图形，适用于：

  • 多维度综合评分排名（如城市竞争力指数、产品评测对比）
  • 需要对多个指标同时排序、筛选的数据探索场景
  • 异构属性数据的排名分析

LineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes.

LineUp 图形预览

基础用法 # 

// 1. 加载 LineUp 依赖
ds_loadcss('smt_LineUp')
ds_loadjs('smt_LineUp')

// 2. 准备数据（转为对象数组格式）
let dataset = __dataset__
dataset = ds_createMap_all(dataset)
// dataset 格式：[{name:'A', score:90, rank:1}, {name:'B', score:85, rank:2}, ...]

// 3. 初始化（先销毁旧实例避免重复渲染）
try { Ljs__name__.destroy() } catch {}
Ljs__name__ = LineUpJS.asTaggle(dom__name__, dataset)

交互事件 #

行选中事件 #

当用户点击选中某行时触发，可获取该行数据并联动刷新其他图形：

Ljs__name__.on(LineUpJS.LineUp.EVENT_SELECTION_CHANGED, (selection) => {
    // 先用 log 查看数据结构，确认字段名
    log(Ljs__name__.data._data[selection])

    // 获取选中行的某个字段值，联动其他图形
    let selectedValue = Ljs__name__.data._data[selection].cityName
    ds_setParam('city', selectedValue)
    ds_refresh(2)
})

行高亮（鼠标悬停）事件 # 

Ljs__name__.on(LineUpJS.LineUp.EVENT_HIGHLIGHT_CHANGED, (highlight) => {
    log(highlight)   // highlight 为当前高亮行的索引
})

主动设置选中/高亮 # 

// 主动选中第 1、2、3 行（索引从 0 开始）
Ljs__name__.setSelection([0, 1, 2])

// 主动高亮第 50 行
Ljs__name__.setHighlight(49)

导出筛选后的数据 #

用户在 LineUp 中筛选/排序后，可以将当前视图数据导出为 CSV 下载：

// 导出当前排名视图数据
let outputStr = Ljs__name__.data.exportTable(
    Ljs__name__.data.getRankings()[0],
    {}
)
// 将 Tab 分隔符替换为逗号，转为标准 CSV 格式
outputStr = outputStr.replace(/\t/g, ',')
ds_download('排名数据.csv', outputStr)

完整示例 # 

// 加载依赖
ds_loadcss('smt_LineUp')
ds_loadjs('smt_LineUp')

let dataset = __dataset__
dataset = ds_createMap_all(dataset)

// 初始化 LineUp
try { Ljs__name__.destroy() } catch {}
Ljs__name__ = LineUpJS.asTaggle(dom__name__, dataset)

// 行选中联动
Ljs__name__.on(LineUpJS.LineUp.EVENT_SELECTION_CHANGED, (selection) => {
    let row = Ljs__name__.data._data[selection]
    log(row)
    if (row) {
        ds_setParam('selected_id', row.id)
        ds_refresh(2)
    }
})
Edit Edit this page