Html组件

简介 #

HTML 组件是 SmartChart 中最灵活的组件类型，适合实现输入控件（筛选器、按钮）、展示组件（指标卡片、表格）和富文本内容。通过在 JS 代码中使用 dom__name__.innerHTML 渲染 HTML，并结合数据集实现动态内容。

关键语法 说明
dom__name__ 当前图形 DOM 容器，__name__ 自动替换为唯一 ID
innerHTML 向容器写入 HTML 内容
ds_setParam() 设置参数，触发联动
ds_refresh(n) 刷新序号 n 的图形
__dataset__ 后端传入的标准二维数组

应用场景 #

HTML 组件是 SmartChart 中最灵活的组件类型，适合实现：

  • 输入控件：输入框、下拉筛选器、多选框、单选框、按钮、日期选择器等
  • 展示组件：富文本、图片、视频、指标卡片、进度条等
  • 表格组件：静态表格、动态数据表格、可点击联动的列表

如果还不熟悉 HTML，建议先花几分钟阅读 HTML 基础教程。
实际开发中遇到不熟悉的组件（如时间选择器），直接搜索即可找到现成 HTML 代码。

HTML 组件示例

核心语法：SmartChart 中的 HTML 写法 #

在图形编辑器的 JS 区中，用 dom__name__.innerHTML = ... 将 HTML 字符串渲染到容器中。

let dataset = __dataset__   // 接收后端数据集
dom__name__.innerHTML = '<h2>Hello SmartChart</h2>'

dom__name__ 是当前图形的 DOM 容器，__name__ 会被自动替换为唯一 ID，避免多图形之间的 DOM 冲突。

从静态 HTML 到动态 SmartChart 组件 #

第一步：找到 HTML 原型 #

以"多选框 + 提交按钮"为例，标准 HTML 如下：

<label><input type="checkbox">孙尚香</label>
<label><input type="checkbox">张飞</label>
<button id='submit_btn'>提交</button>

第二步：转化为静态 SmartChart 写法 # 

let dataset = __dataset__
let table = `
    <label><input type="checkbox">孙一香</label>
    <label><input type="checkbox">孙二香</label>
    <label><input type="checkbox">孙三香</label>
`
table += "<button id='id_select__name__'>提交</button>"
dom__name__.innerHTML = table

注意：按钮 id 要加上 __name__ 后缀，避免多个图形中同名 id 冲突。

第三步：改为数据集动态驱动 #

让内容随数据库数据动态变化，只需循环遍历数据集：

let dataset = __dataset__  // 例如：[['name'], ['孙一香'], ['孙二香'], ['孙三香']]
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__'>提交</button>`
dom__name__.innerHTML = table

常用 HTML 组件示例 #

下拉筛选器（联动刷新） # 

let dataset = __dataset__   // [['city'], ['长沙'], ['广州'], ['深圳']]
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="">全部</option>
        ${options}
    </select>
`

// 绑定 change 事件，联动刷新其他图形
document.getElementById('sel__name__').addEventListener('change', function() {
    ds_setParam('city', this.value)
    ds_refresh(2)   // 刷新序号 2 的图形
    ds_refresh(3)
})

输入框 + 按钮（查询联动） # 

dom__name__.innerHTML = `
    <div style="display:flex;gap:8px;padding:8px">
        <input id="kw__name__" type="text" placeholder="输入关键词..." 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">查询</button>
    </div>
`
document.getElementById('btn__name__').addEventListener('click', function() {
    let kw = document.getElementById('kw__name__').value
    ds_setParam('keyword', kw)
    ds_refresh(2)
})

指标卡片 # 

let dataset = __dataset__  // [['指标', '值', '同比'], ['销售额', '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>`

动态表格 # 

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>
`

为 HTML 组件添加点击联动 #

HTML 组件的点击事件需要在 innerHTML 赋值完成后绑定：

// 先渲染 HTML
dom__name__.innerHTML = table

// 再绑定事件（使用 jQuery 的 unbind+click 确保不重复绑定）
$('#container___name__ button').unbind('click').click(function() {
    // 获取选中的多选框值
    let selected = []
    $('#container___name__ input[type=checkbox]:checked').each(function() {
        selected.push($(this).val())
    })
    ds_setParam('items', selected.join(','))
    ds_refresh(2)
})

学习资源 #

更多 HTML 组件开发实战请参考"万能表格系列视频"：

Edit Edit this page