Highcharts 是一个流行的 JavaScript 图表库,它提供了丰富的图表类型和交互功能。在 Highcharts 中隐藏系列通常是通过图例上的勾选框来实现的。但是,在某些情况下,您可能需要以编程方式隐藏特定的系列,而不使用图例。
方案
要隐藏 Highcharts 系列,可以使用该系列的 hide()
方法。为此,您需要先获取对 series
对象的引用。这可以通过在 chart
对象上调用 get()
方法并将系列的索引作为参数来完成。
以下是一个示例:
-- -------------------- ---- ------- -- -- ---------- ----- -- ----- ----- - ----------------------------- - -- ---- --- -- ---------- ----- ------ - ---------------- -- ----- --------------
请注意,当您隐藏系列时,Highcharts 将自动重新绘制图表。如果您希望在隐藏多个系列后一次性重新绘制,请参考下面的示例。
示例
假设您有一个包含三个系列(A
、B
和 C
)的线图。当用户单击按钮时,您希望隐藏 B
和 C
系列。
以下是一个实现该行为的示例代码:
-- -------------------- ---- ------- ---- --------------------- ------- -------------------------- - - - ----------- ------- --------------------------------------------------------- -------- -- ---- ----- ----- - ----------------------------- - ------ - ----- ------ -- ------- -- ----- ---- ----- --- -- -- -- - ----- ---- ----- --- -- -- -- - ----- ---- ----- --- -- -- -- --- -- ---------------- ----- ---------------- - ---------------------------------------------- ------------------------------------------ -- -- - ----- ------- - ---------------- ----- ------- - ---------------- --------------- --------------- --------------- --- ---------
在此示例中,我们创建了一个包含三个系列的线图,并将其绘制在 #container
元素上。当用户单击按钮时,我们获取对 B
和 C
系列的引用并隐藏它们。最后,我们使用 chart.redraw()
方法一次性重新绘制图表。
结论
通过使用 hide()
方法,您可以以编程方式隐藏 Highcharts 图表中的系列,而不必依赖于图例上的勾选框。请记住,在隐藏系列时,Highcharts 将自动重新绘制图表。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/29604