Highcharts是一个用于在Web应用程序中创建交互式图表的JavaScript库。它提供了各种图表类型，并具有可定制的外观和感觉，使其成为前端开发人员的首选选择。本文将介绍如何通过DOM容器访问Highcharts图表。
什么是DOM容器？
在HTML中，DOM容器是指可以包含其他HTML元素的元素。例如，<div>元素就是一个常见的DOM容器，它可以用于包含其他HTML元素，如图像、段落、标题等。在使用Highcharts时，我们需要一个DOM容器来放置图表。
Highcharts图表基础
在开始之前，我们需要先了解Highcharts图表的基础知识。以下是一个简单的Highcharts柱状图示例：
-- -------------------- ---- -------
-- -----------
--- ----- - ----------------------------- -
------ -
----- --------
--
------ -
----- -------
--
------ -
----------- ------ ----- ----- ----- ----- -----
--
------ -
------ -
----- ---- -----
-
--
------- --
----- ------
----- ----- ---- ---- ---- ---- ----
--
---上面的代码创建了一个柱状图对象并将其放置在名为“container”的DOM容器中。现在让我们看看如何从DOM容器中访问这个图表对象。
通过DOM容器访问Highcharts
使用Highcharts创建图表时，可以通过DOM容器的ID来引用该图表。例如，在上面的示例中，我们使用Highcharts.chart('container', {...})来创建图表对象并将其放置在名为“container”的DOM容器中。要访问此图表对象，我们只需通过DOM容器的ID获取它即可：
var chart = Highcharts.charts[0];
上述代码将返回在第一个DOM容器中创建的Highcharts图表对象。这种方法适用于您只有一个Highcharts图表时，但是如果您同时拥有多个图表，该怎么办呢？
在这种情况下，我们需要遍历所有Highcharts图表并选择与我们要访问的DOM容器匹配的那一个。以下是一种实现方法：
-- -------------------- ---- -------
-------- ----------------------------------- -
--- ------ - ------------------
--- ---- - - -- - - -------------- ---- -
-- ---------------------- --- ------------ -
------ ----------
-
-
------ -----
-上述函数将遍历所有Highcharts图表并返回与指定DOM容器ID匹配的图表对象。如果找不到匹配的图表对象，则返回null。
我们可以这样使用这个函数：
var chart = findChartByContainerId('container');现在，我们可以使用chart对象对Highcharts图表进行各种操作。
总结
通过DOM容器访问Highcharts图表是相对简单的，只需从DOM容器ID获取Highcharts图表对象即可。如果您同时拥有多个图表，则需要遍历所有图表并选择与指定DOM容器匹配的那一个。希望这篇文章能够帮助您更好地理解如何使用Highcharts创建和访问图表对象。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12330