Highcharts是一款流行的JavaScript图表库，可以用于创建各种类型的交互式图表。其中包括列范围图，它可以显示数据点的最小值和最大值，并且还具有导航功能，可以缩放和平移图表。
本文将介绍如何使用Highcharts创建列范围图，并添加范围选择器和导航按钮。
安装和引入Highcharts
首先要做的就是安装和引入Highcharts库。你可以在官方网站上下载它，或者使用NPM或Yarn等包管理工具进行安装。
一旦安装完成，你需要在HTML文件中引入Highcharts库。以下是一个示例：
-- -------------------- ---- -------
--------- -----
------
------
----------------- ----- ------ -------------
------- ---------------------------------------------------------
------- -------------------------------------------------------------------
------- ------------------------------------------------------------
-------
------
---- -----------------
-------
-------创建基本的列范围图
接下来，你需要创建一个基本的列范围图。Highcharts提供了一个range series模块，可以轻松地实现这个功能。以下是一个简单的列范围图示例：
-- -------------------- ---- -------
------------------------- -
------ -
----- -------------
--
------ -
----- ------------ --------- -- ------
--
------ -
----------- ------- ------ ------ ------ ------ ------
------ ------ ------ ------ ------ ------
--
------ -
------ -
----- ------------ -----
-
--
------- --
----- --------
----- -
------ -----
------ -----
------ -----
------ ------
----- ------
----- ------
----- ------
----- ------
----- ------
------ ------
------ ------
------- ----
-
--
---在上面的示例中，我们使用了columnrange类型的图表，并提供了一个数据系列来指定每个月份的最小和最大温度。
添加范围选择器
现在，我们可以开始添加范围选择器。这个功能可以让用户缩放和平移图表，以便更好地查看数据。
要添加范围选择器，你需要在chart对象中设置rangeSelector属性。下面是一个具有范围选择器的示例：
-- -------------------- ---- -------
------------------------------ -
------ -
----- -------------
--
------ -
----- ------------ --------- -- ------
--
------ -
----------- ------- ------ ------ ------ ------ ------
------ ------ ------ ------ ------ ------
--
------ -
------ -
----- ------------ -----
-
--
------- --
----- --------
----- -
------ -----
------ -----
------ -----
------ ------
----- ------
----- ------
----- ------
----- ------
----- ------
----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------