如何在LightningChart中添加输入框获取用户参数？

LightningChart JS本身没有内置表单输入控件，直接用原生HTML/CSS创建输入框，再通过LC的API联动图表即可，具体步骤如下：

1. 添加HTML输入控件 #

在图表容器下方插入输入框和按钮的HTML结构：

<!-- 图表容器 -->
<div id="chart-container"></div>
<!-- 输入控制区 -->
<div id="range-controls" style="margin-top: 16px; display: flex; gap: 16px; align-items: center;">
    <div>
        <label>起始值：</label>
        <input type="number" id="start-input" placeholder="输入起始值">
    </div>
    <div>
        <label>结束值：</label>
        <input type="number" id="end-input" placeholder="输入结束值">
    </div>
    <button id="apply-range">应用范围</button>
</div>

2. 联动图表与输入控件 #

在图表初始化代码之后，添加输入框的事件监听，获取用户输入并调整图表：

// 初始化3D频谱图（保留你原有的图表初始化逻辑）
const chart = lightningChart().Chart3D({ container: 'chart-container' })
// ... 原有的频谱图配置、数据加载代码 ...

// 获取输入元素
const startInput = document.getElementById('start-input')
const endInput = document.getElementById('end-input')
const applyBtn = document.getElementById('apply-range')

// 绑定应用按钮点击事件
applyBtn.addEventListener('click', () => {
    const startVal = parseFloat(startInput.value)
    const endVal = parseFloat(endInput.value)

    // 输入有效性校验
    if (isNaN(startVal) || isNaN(endVal) || startVal >= endVal) {
        alert('请输入有效的数值范围，起始值必须小于结束值')
        return
    }

    // 根据需求调整图表——这里以调整Z轴范围为例（适配3D频谱图的数值轴）
    chart.getDefaultAxisZ().setInterval({ start: startVal, end: endVal })

    // 如果需要过滤数据重新渲染（比如仅显示范围内的频谱数据）
    // 假设你有原始数据数组rawData，过滤后更新系列
    // const filteredData = rawData.filter(dataPoint => dataPoint.value >= startVal && dataPoint.value <= endVal)
    // spectrogramSeries.invalidateValues(filteredData)
})

关键说明 #

• 原生HTML控件可以完全自定义样式，比如匹配LightningChart的主题风格，调整布局、颜色等。
• 具体调用的LC API取决于你的需求：
  • 仅调整轴显示范围：使用对应轴的setInterval方法（示例中用Z轴，你可以根据实际轴配置修改为X/Y/Z轴）。
  • 过滤数据重新渲染：处理原始数据后调用频谱图系列的invalidateValues方法更新数据。

内容的提问来源于stack exchange，提问作者Taki