HTML Components | Smartchart开发手册

Introduction #

HTML components are the most flexible component type in SmartChart, suitable for implementing input controls (filters, buttons), display components (indicator cards, tables), and rich text content. Use dom__name__.innerHTML in JS code to render HTML, combined with datasets for dynamic content.

Key Syntax	Description
`dom__name__`	Current graphic DOM container, `__name__` auto-replaced with unique ID
`innerHTML`	Write HTML content to container
`ds_setParam()`	Set parameter to trigger linkage
`ds_refresh(n)`	Refresh graphic number n
`__dataset__`	Standard 2D array from backend

Use Cases #

HTML components are the most flexible component type in SmartChart, suitable for:

Input controls: input boxes, dropdown filters, checkboxes, radio buttons, buttons, date pickers, etc.
Display components: rich text, images, videos, indicator cards, progress bars, etc.
Table components: static tables, dynamic data tables, clickable linked lists

If you’re not familiar with HTML, spend a few minutes reading the HTML Basics Tutorial. In practice, when encountering unfamiliar components (like date pickers), a quick search will find ready-made HTML code.

HTML Component Example

Core Syntax: HTML in SmartChart #

In the graphic editor’s JS area, use dom__name__.innerHTML = ... to render HTML strings to the container.

let dataset = __dataset__   // Receive backend dataset
dom__name__.innerHTML = '<h2>Hello SmartChart</h2>'

dom__name__ is the current graphic’s DOM container. __name__ is automatically replaced with a unique ID to avoid DOM conflicts between multiple graphics.

From Static HTML to Dynamic SmartChart Component #

Step 1: Find HTML Prototype #

Using “checkbox + submit button” as an example, standard HTML:

<label><input type="checkbox">Option A</label>
<label><input type="checkbox">Option B</label>
<button id='submit_btn'>Submit</button>

Step 2: Convert to Static SmartChart Pattern #

let dataset = __dataset__
let table = `
    <label><input type="checkbox">Option A</label>
    <label><input type="checkbox">Option B</label>
    <label><input type="checkbox">Option C</label>
`
table += "<button id='id_select__name__'>Submit</button>"
dom__name__.innerHTML = table

Note: Button IDs must include the __name__ suffix to avoid ID conflicts across multiple graphics.

Step 3: Make it Dataset-Driven #

To make content dynamically change with database data, loop through the dataset:

let dataset = __dataset__  // e.g.: [['name'], ['Option A'], ['Option B'], ['Option C']]
let table = ''
for (let i = 1; i < dataset.length; i++) {
    table += `<label><input type="checkbox" value="${dataset[i][0]}"/>${dataset[i][0]}</label> `
}
table += `<button id='id_select__name__'>Submit</button>`
dom__name__.innerHTML = table

Common HTML Component Examples #

let dataset = __dataset__   // [['city'], ['Changsha'], ['Guangzhou'], ['Shenzhen']]
let options = dataset.slice(1).map(row => `<option value="${row[0]}">${row[0]}</option>`).join('')

dom__name__.innerHTML = `
    <select id="sel__name__" style="width:100%;padding:6px">
        <option value="">All</option>
        ${options}
    </select>
`

// Bind change event for linked refresh
document.getElementById('sel__name__').addEventListener('change', function() {
    ds_setParam('city', this.value)
    ds_refresh(2)   // Refresh graphic number 2
    ds_refresh(3)
})

Input Box + Button (Query Linkage) #

dom__name__.innerHTML = `
    <div style="display:flex;gap:8px;padding:8px">
        <input id="kw__name__" type="text" placeholder="Enter keyword..." style="flex:1;padding:6px;border:1px solid #ddd;border-radius:4px"/>
        <button id="btn__name__" style="padding:6px 16px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer">Search</button>
    </div>
`
document.getElementById('btn__name__').addEventListener('click', function() {
    let kw = document.getElementById('kw__name__').value
    ds_setParam('keyword', kw)
    ds_refresh(2)
})

Indicator Card #

let dataset = __dataset__  // [['Metric', 'Value', 'YoY'], ['Revenue', '1,234,567', '+12.5%']]
let cards = dataset.slice(1).map(row => `
    <div style="flex:1;background:#fff;border-radius:8px;padding:16px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.08)">
        <div style="color:#666;font-size:13px">${row[0]}</div>
        <div style="color:#1890ff;font-size:28px;font-weight:bold;margin:8px 0">${row[1]}</div>
        <div style="color:#52c41a;font-size:12px">${row[2]}</div>
    </div>
`).join('')

dom__name__.innerHTML = `<div style="display:flex;gap:12px;height:100%;align-items:center">${cards}</div>`

Dynamic Table #

let dataset = __dataset__
let thead = dataset[0].map(h => `<th>${h}</th>`).join('')
let tbody = dataset.slice(1).map(row =>
    `<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>`
).join('')

dom__name__.innerHTML = `
    <table style="width:100%;border-collapse:collapse;font-size:13px">
        <thead style="background:#f0f2f5">
            <tr>${thead}</tr>
        </thead>
        <tbody>${tbody}</tbody>
    </table>
`

Adding Click Linkage to HTML Components #

Click events for HTML components must be bound after innerHTML assignment:

// Render HTML first
dom__name__.innerHTML = table

// Then bind events (use jQuery's unbind+click to prevent duplicate binding)
$('#container___name__ button').unbind('click').click(function() {
    // Get selected checkbox values
    let selected = []
    $('#container___name__ input[type=checkbox]:checked').each(function() {
        selected.push($(this).val())
    })
    ds_setParam('items', selected.join(','))
    ds_refresh(2)
})

Learning Resources #

For more HTML component development practice, refer to the “Universal Table Series Videos”: