在前端开发中，数据可视化是一项必不可少的技能。Highcharts 是一个流行的 JavaScript 数据可视化库，它提供了众多的图表类型和强大的定制化功能。然而，在某些情况下，我们需要关闭或隐藏 Highcharts 图表，例如当用户切换到另一个标签页时，或者当我们需要动态地更新数据时。本文将介绍如何在 Highcharts 中关闭或隐藏图表，并提供示例代码。
方法1：使用 Chart.hide() 方法
Highcharts 的每个图表都有一个名为 Chart 的对象，该对象提供了许多实用的方法，其中一个是 hide() 方法。这个方法可以隐藏当前图表。
// 获取图表对象
const chart = Highcharts.chart('container', { /* options */ });
// 隐藏图表
chart.hide();需要注意的是，如果您想要再次显示图表，请使用 show() 方法：
chart.show();
方法2：使用 CSS 样式
除了使用 Chart.hide() 方法外，我们还可以使用 CSS 样式来隐藏 Highcharts 图表。具体来说，我们可以给包含图表的 DOM 元素添加 display: none; 样式。
<div id="container" style="width:100%; height:400px;"></div> <button id="toggle">Toggle Chart</button>
-- -------------------- ---- -------
----- --------- - -------------------------------------
----- ------------ - ----------------------------------
-------------------------------------- ---------- -
-- ------------------------ --- ------- -
----------------------- - --------
- ---- -
----------------------- - -------
-
---在上面的代码中，我们添加了一个按钮，用于切换图表的显示和隐藏状态。当用户点击按钮时，我们会检查包含图表的 DOM 元素的 display 属性。如果它是 "none"，那么我们将把它设置为 "block"，这样图表就会重新显示出来。否则，我们将把它设置为 "none"，这样图表就会被隐藏起来。
总结
本文介绍了两种方法来关闭或隐藏 Highcharts 图表：使用 Chart.hide() 方法和使用 CSS 样式。需要注意的是，无论哪种方法，都可以很容易地实现对 Highcharts 图表的动态控制和更新。希望本文能够对你理解和应用 Highcharts 图表有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12800