隐藏 Highcharts 系列而无需使用图例

阅读时长 3 分钟读完

Highcharts 是一个流行的 JavaScript 图表库,它提供了丰富的图表类型和交互功能。在 Highcharts 中隐藏系列通常是通过图例上的勾选框来实现的。但是,在某些情况下,您可能需要以编程方式隐藏特定的系列,而不使用图例。

方案

要隐藏 Highcharts 系列,可以使用该系列的 hide() 方法。为此,您需要先获取对 series 对象的引用。这可以通过在 chart 对象上调用 get() 方法并将系列的索引作为参数来完成。

以下是一个示例:

-- -------------------- ---- -------
-- -- ---------- ----- --
----- ----- - ----------------------------- -
    -- ----
---

-- ----------
----- ------ - ----------------

-- -----
--------------

请注意,当您隐藏系列时,Highcharts 将自动重新绘制图表。如果您希望在隐藏多个系列后一次性重新绘制,请参考下面的示例。

示例

假设您有一个包含三个系列(ABC)的线图。当用户单击按钮时,您希望隐藏 BC 系列。

以下是一个实现该行为的示例代码:

-- -------------------- ---- -------
---- ---------------------
------- -------------------------- - - - -----------

------- ---------------------------------------------------------
--------
-- ----
----- ----- - ----------------------------- -
    ------ -
        ----- ------
    --
    ------- --
        ----- ----
        ----- --- -- --
    -- -
        ----- ----
        ----- --- -- --
    -- -
        ----- ----
        ----- --- -- --
    --
---

-- ----------------
----- ---------------- - ----------------------------------------------
------------------------------------------ -- -- -
    ----- ------- - ----------------
    ----- ------- - ----------------

    ---------------
    ---------------

    ---------------
---
---------

在此示例中,我们创建了一个包含三个系列的线图,并将其绘制在 #container 元素上。当用户单击按钮时,我们获取对 BC 系列的引用并隐藏它们。最后,我们使用 chart.redraw() 方法一次性重新绘制图表。

结论

通过使用 hide() 方法,您可以以编程方式隐藏 Highcharts 图表中的系列,而不必依赖于图例上的勾选框。请记住,在隐藏系列时,Highcharts 将自动重新绘制图表。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/29604

纠错
反馈