Highcharts 是一款流行的 JavaScript 图表库，它可以用来制作各种类型的图表。在使用 Highcharts 进行前端开发时，会遇到一些常见的问题，其中一个重要的问题就是如何使用 redraw() 方法来刷新图表。
什么是 redraw()？
redraw() 是 Highcharts 中的一个方法，用于重新绘制和更新已经存在的图表。当数据或者样式发生变化时，我们可以使用 redraw() 方法来更新 Highcharts 图表。
redraw() 的使用
下面是一个简单的 Highcharts 示例代码，我们可以通过 redraw() 方法来更新图表数据：
-- -------------------- ---- -------
-- -----
--- ----- - ----------------------------- -
------ -
----- ------
--
------- --
----- --- -- -- -- --
--
---
-- ----
--------------------------- -- -- -- -----
-- ----
---------------在这个示例中，我们首先创建了一个包含一组数据的图表，并将其渲染到一个名为 container 的容器中。接着，我们更新了图表的数据，并调用了 redraw() 方法来重新绘制图表并展现出更新后的数据。
redraw() 的局限性
虽然 redraw() 方法能够有效地更新和刷新 Highcharts 图表，但也存在一些局限性。在某些情况下，使用 redraw() 方法可能会导致性能问题和不必要的图表重绘。
例如，当我们需要动态调整 Highcharts 图表的大小时，如果频繁地调用 redraw() 方法，会使得图表反复重绘，从而降低性能和用户体验。这时候，我们可以使用 setSize() 方法来动态调整图表大小，以避免不必要的重绘。
另外，在某些情况下，我们可能需要对 Highcharts 图表进行多次修改和更新，并将所有的修改一次性应用到图表上。这时候，我们可以使用 update() 方法来批量修改并更新图表，从而提高性能和代码的可读性。
update() 的使用
下面是一个示例代码，展示如何使用 update() 方法批量更新 Highcharts 图表：
-- -------------------- ---- -------
-- -----
--- ----- - ----------------------------- -
------ -
----- ------
--
------- --
----- --- -- -- -- --
--
---
-- ------
--------------
------ -
----- -----
--
------ -
------ -
----- -------
--
------- -
---------- ---------- -
------ ---------- - ----
-
-
--
------- --
----- ------
----- --- -- -- -- ---
--
---在这个示例中，我们首先创建了一个包含一组数据的图表，并将其渲染到一个名为 container 的容器中。接着，我们使用 update() 方法批量更新了图表的标题、Y 轴标题、Y 轴标签格式和系列数据。通过一次性地应用所有修改，我们可以避免不必要的重绘和性能问题。
总结
在 Highcharts 前端开发中，redraw() 和 update() 是两个常见的方法，用于重新绘制和更新已经存在的图表。虽然 redraw() 方法具有很好的灵活性和通用性，但也存在性能问题和不必要的图表重绘。因此，在实际开发中，我们需要根据具
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13559