背景
Highcharts 是一个流行的用于创建交互式图表和可视化数据的 JavaScript 库。在使用 Highcharts 来创建折线图时，有时候我们需要在默认状态下将一些线条隐藏起来，以便让用户在需要时展示它们。本文将介绍如何在 Highcharts 中实现这个功能。
实现方法
首先，在 Highcharts 中创建一个折线图：
-- -------------------- ---- -------
----------------------------- -
------ -
----- ------
--
------ -
----- -------- ------- ------------
--
------ -
----------- ------- ------ ------ ------ ------ ------
------ ------ ------ ------ ------ ------
--
------ -
------ -
----- ------------ -----
-
--
------- --
----- --------
----- ----- ---- ---- ----- ----- ----- ----- ----- ----- ----- ----- ----
-- -
----- ---- ------
----- ------ ---- ---- ----- ----- ----- ----- ----- ----- ----- ---- ----
-- -
----- ---------
----- ------ ---- ---- ---- ----- ----- ----- ----- ----- ---- ---- ----
-- -
----- ---------
----- ----- ---- ---- ---- ----- ----- ----- ----- ----- ----- ---- ----
--
---接下来，我们可以使用 setVisible() 方法来隐藏某个线条。例如，如果我们想要在默认状态下隐藏 'Berlin' 这条线，可以这样做：
chart.series[2].setVisible(false);
请注意，此代码必须在 Highcharts 图表被创建之后调用才能生效。
如果需要在其他情况下展示这条被隐藏的线条，则可以通过用户操作或代码控制来展示它。例如，在按钮点击事件中可以使用以下代码来显示该线条：
document.getElementById('show-berlin').addEventListener('click', function () {
chart.series[2].setVisible(true);
});示例代码
-- -------------------- ---- -------
---- -------------- -------------- -------------
------- --------------------- ---------------
------- ---------------------------------------------------------
--------
--- ----- - ----------------------------- -
------ -
----- ------
--
------ -
----- -------- ------- ------------
--
------ -
----------- ------- ------ ------ ------ ------ ------
------ ------ ------ ------ ------ ------
--
------ -
------ -
----- ------------ -----
-
--
------- --
----- --------
----- ----- ---- ---- ----- ----- ----- ----- ----- ----- ----- ----- ----
-- -
----- ---- ------
----- ------ ---- ---- ----- ----- ----- ----- ----- ----- ----- ---- ----
-- -
----- -------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------