如何通过HTML按钮控制网页折线图中不同数据线的隐藏-html教程-PHP中文网

最稳妥的做法是直接修改 series[i].show 并调用 mychart.setoption()；echarts 无“一键隐藏其他”api，需手动遍历重设 show 状态；常见错误是仅改 legend 选中状态而未同步 series.show，导致 tooltip 仍显示但折线不渲染。

如何通过html按钮控制网页折线图中不同数据线的隐藏

用按钮控制 ECharts 折线图 series 显示/隐藏

直接改 series[i].show 并调用 myChart.setOption() 是最稳妥的做法。ECharts 本身不提供“一键隐藏其他、只留当前”的 API，必须手动遍历并重设每条线的 show 状态。

常见错误是只改了 legend 的选中状态，但没同步更新 series 的 show 字段——这会导致 tooltip 里还显示数据、hover 仍触发，但折线却不画出来，视觉和行为不一致。

确保每个 series 都有唯一且匹配 legend.data 的 name 字段
修改 series 后必须调用 setOption(option, { notMerge: true }) 或完整重传 option，不能只传 diff
如果用了 lazy update（如 Vue 的响应式绑定），要强制触发 reactivity，比如用 nextTick 再 setOption

纯 HTML + JavaScript 控制多个 div 区域切换（无图表库）

如果你的“折线图”其实是多个独立 <div> 块（比如用 canvas 手绘、或截图嵌入），那更简单：用按钮控制对应区域的 <code>style.display 即可，不需要任何图表库。

关键不是“隐藏线条”，而是“只让一个容器可见”。容易踩的坑是用 visibility: hidden ——它保留占位，可能撑开布局；应该用 display: none。

所有目标 <div> 初始加 <code>style="display:none"，或统一 class 如 chart-panel 并在 CSS 中设 .chart-panel { display: none; }
按钮点击时，先用 document.querySelectorAll('.chart-panel').forEach(el => el.style.display = 'none') 清空所有
再用 document.getElementById('line-2').style.display = 'block' 显式打开目标
避免写死 ID，可用 data-target="line-2" 属性配合 querySelector 动态取值

点击图例时默认联动隐藏/显示，但需禁用自动行为

ECharts 默认点击图例就会 toggle 对应 series 的显示，但这个行为不可靠：它不触发你自己的逻辑，也不保证 tooltip 或 axisPointer 同步更新。想精确控制，必须关掉默认行为，自己监听事件。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

做法是在初始化时设置：legend: { selectedMode: false }，然后手动绑定 myChart.on('legendselectchanged', ...)。

selectedMode: false 关闭图例自动切换，否则你代码改了 show，用户点一下又翻回去
事件回调里拿到 params.name，再遍历 option.series 找到对应项，设 show: true，其余设 show: false
注意：params.selected 是当前图例项的选中状态，但你不一定照搬——比如“只留一条”逻辑下，它永远为 true