前言
Highcharts 是一款非常流行的图表库，能够轻松地创建各种类型的图表。而 high-chart-extension 是 Highcharts 的扩展插件，提供了更多的图表类型和功能。在本文中，我们将介绍如何使用 npm 包 high-chart-extension，并展示一些实际应用中的示例代码。
安装 high-chart-extension
使用 npm 安装 high-chart-extension：
npm install highcharts highcharts-extension
引入 high-chart-extension
在代码中引入 high-chart-extension：
import Highcharts from 'highcharts'; import highchartsMore from 'highcharts/highcharts-more'; import highchartsSolidGauge from 'highcharts/modules/solid-gauge'; import highchartsExporting from 'highcharts/modules/exporting'; import highchartsAccessibility from 'highcharts/modules/accessibility'; import highchartsExtension from 'highcharts-extension';
使用 high-chart-extension
在使用 high-chart-extension 之前，需要先调用 Highcharts 的模块：
highchartsMore(Highcharts); highchartsSolidGauge(Highcharts); highchartsExporting(Highcharts); highchartsAccessibility(Highcharts); highchartsExtension(Highcharts);
然后就可以创建各种类型的图表了，比如：
水波图
-- -------------------- ---- -------
----------------------------------- -
------ -
----- -------------
---------------- --------------
--
---------- -
-------- ------
--
-------- -
-------- ------
--
------ -
----- ------
------ -
----------- -------
--
--
------ -
---- --
---- ----
---------- --
-------------- ---
--
------------ -
----------- -
----------- -
-------- ------
--
-------- --------
-------- -----
--
--
------- -
-
----- -----
----- -
-
------ ----------
------- -------
------------ ------
-- ---
--
--
--
--
---箱线图
-- -------------------- ---- -------
----------------------------------- -
------ -
----- ----------
---------------- --------------
--
---------- -
-------- ------
--
-------- -
-------- ------
--
------ -
----- ------
------ -
----------- -------
--
--
------ -
------ -
----- ------
--
---------- --
-------------- --
------------------ -----
-------------- --- --- --- --- --- ----
--
------- -
-------- ------
--
-------- -
----------- -
------ -
----- -
---------------- -
----------- -
----- - -
--------------- -
------- -
------- - -
------------- -
------- -
----- - -
----------------- -
------- -
------- - -
------------- -
------- -
----- - -
--------------
--
--
--
------- -
-
----- ------
----- -
----- ---- ---- ---- -----
----- ---- ---- ---- -----
----- ---- ---- ---- -----
----- ---- ---- ---- -----
----
--
--
--
---仪表盘
-- -------------------- ---- -------
----------------------------------- -
------ -
----- --------
---------------- --------------
--
---------- -
-------- ------
--
-------- -
-------- ------
--
------ -
----- ------
------ -
----------- -------
--
--
------ -
---- --
---- ----
------------- ---
------ -
----- -----
--
------------------ -------
--------------- --
---------------- ---
------------------ ---------
--------------- -------
------------------ ---
---------- --
------------- ---------
----------- ---
---------- -------
------- -
----- --
--------- -------
--
--
------- -
-
----- -----
----- -----
-------- -
------------ - ------
--
--
--
---结论
Highcharts 拥有广泛的应用场景，而 high-chart-extension 则进一步扩展了 Highcharts 的功能，使得我们可以更方便地创建各种类型的图表。希望这篇文章对于初学者有所帮助，也让更多的人了解并使用 high-chart-extension。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5551ab1864dac669ff