Line Up Chart | Smartchart开发手册

Introduction #

LineUp is an interactive visualization designed for multi-dimensional comprehensive scoring and ranking. It supports dynamic sorting, filtering, and highlighting by multiple metrics. In SmartChart, load the LineUp JS library and pass object array data to use it. Ideal for city competitiveness, product evaluation, and other ranking analysis scenarios.

Core Function	Description
`ds_loadcss('smt_LineUp')`	Load LineUp styles
`ds_loadjs('smt_LineUp')`	Load LineUp JS library
`ds_createMap_all(dataset)`	Convert 2D array to object array format
`LineUpJS.asTaggle()`	Initialize LineUp instance
`EVENT_SELECTION_CHANGED`	Row selection event, can trigger linkage

Use Cases #

LineUp is an interactive visualization designed for multi-attribute ranking, suitable for:

Multi-dimensional comprehensive scoring rankings (e.g., city competitiveness index, product evaluation comparison)
Data exploration scenarios requiring simultaneous sorting and filtering of multiple metrics
Ranking analysis of heterogeneous attribute data

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

LineUp Chart Preview

Basic Usage #

// 1. Load LineUp dependencies
ds_loadcss('smt_LineUp')
ds_loadjs('smt_LineUp')

// 2. Prepare data (convert to object array format)
let dataset = __dataset__
dataset = ds_createMap_all(dataset)
// dataset format: [{name:'A', score:90, rank:1}, {name:'B', score:85, rank:2}, ...]

// 3. Initialize (destroy old instance first to avoid duplicate rendering)
try { Ljs__name__.destroy() } catch {}
Ljs__name__ = LineUpJS.asTaggle(dom__name__, dataset)

Interaction Events #

Row Selection Event #

Triggered when user clicks to select a row. Can get row data and trigger linked refresh of other graphics:

Ljs__name__.on(LineUpJS.LineUp.EVENT_SELECTION_CHANGED, (selection) => {
    // Use log to inspect data structure first, confirm field names
    log(Ljs__name__.data._data[selection])

    // Get a specific field value from selected row for linkage
    let selectedValue = Ljs__name__.data._data[selection].cityName
    ds_setParam('city', selectedValue)
    ds_refresh(2)
})

Row Highlight (Hover) Event #

Ljs__name__.on(LineUpJS.LineUp.EVENT_HIGHLIGHT_CHANGED, (highlight) => {
    log(highlight)   // highlight is the index of the currently highlighted row
})

Set Selection/Highlight Programmatically #

// Select rows 1, 2, 3 (0-based index)
Ljs__name__.setSelection([0, 1, 2])

// Highlight row 50
Ljs__name__.setHighlight(49)

Export Filtered Data #

After users filter/sort in LineUp, the current view data can be exported as CSV:

// Export current ranking view data
let outputStr = Ljs__name__.data.exportTable(
    Ljs__name__.data.getRankings()[0],
    {}
)
// Replace tab separator with comma for standard CSV format
outputStr = outputStr.replace(/\t/g, ',')
ds_download('ranking_data.csv', outputStr)

Complete Example #

// Load dependencies
ds_loadcss('smt_LineUp')
ds_loadjs('smt_LineUp')

let dataset = __dataset__
dataset = ds_createMap_all(dataset)

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

// Row selection linkage
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)
    }
})