前端工程师们都知道，Highcharts 是一个非常流行的 JavaScript 图表库，可以制作出各种基于数据的图表。然而有时候 Highcharts 的使用有一定的难度，特别是需要处理大量数据的时候。
为了解决这个问题，我们可以使用一个名为 native-highcharts-wrapper 的 npm 包。本文将提供一个详细的使用教程，帮助你更好地使用这个包创作图表。
安装
首先要下载和安装这个 npm 包，可以使用 npm 命令，执行以下安装命令：
npm install native-highcharts-wrapper --save
使用实例
在安装完成后，我们可以先创建一个 HTML 文件，添加一个 <div>，然后来制作一张基础的折线图。我们可以将下列代码复制到 HTML 文件中：
index.html:
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ---------------
-------
------
---- ---------- -----
---- ------------------
---- -- -- - ---
------- -----------------------------------------------------------------------------------------
--------
-- ------
----- ----- - -
------ ------
------ -------
------- -------
------- -------
------- -------
------- -------
------- -------
------- ------
--
-- ----
----- ------ - -------------------------------------
------ -
----- -------
--------- --------
--
------- --
----- -----
--
---
---------
-------
-------我们可以使用 createChart() 创建一个 Highcharts 图表，然后让它显示。
数据处理
我们也可以处理大量的数据。
为了说明这种情况，我们可以添加一个表格，然后使用模拟数据来生成 Highcharts 图表。
index.html:
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ---------------
-------
------
---- -- ---
-------
-------
----
-----------
-------------
-------------
-----
--------
-------
----
------------
-----------
-----------
-----
----
------------
-----------
-----------
-----
----
------------
-----------
-----------
-----
----
------------
-----------
-----------
-----
----
------------
-----------
-----------
-----
----
------------
-----------
-----------
-----
----
------------
-----------
-----------
-----
----
------------
-----------
-----------
-----
--------
--------
---- ---------- -----
---- ------------------
---- -- -- - ---
------- -----------------------------------------------------------------------------------------
--------
-- ------
----- ----- - ---
----- ---- - ------------------------------------
--- ---- - - -- - - ------------ ---- -
----- --- - --------
----- ----- - -------------------------------
----- ---- - -------------------
----- ----- - ---------------------------- ----
----------------- --------
-
-- ----
----- ------ - -------------------------------------
------ -
----- ------
--------- --------
--
------ -
----- ----------
--
------ -
------ -
----- ------
-
--
------- --
----- -----
--
---
---------
-------
-------首先，我们有一个包含表头和行的表格。
然后我们遍历表格，将数据转换成 Highcharts 需要的格式。
最后，我们可以将这些数据传递给 createChart()，来生成图表。
指导意义
native-highcharts-wrapper 可以让我们更轻松地使用 Highcharts 制作各种类型的图表，特别是处理数据方面。
上面的例子中，我们展示了如何将数据从表格中取出，并将其转换为 Highcharts 所需的格式。
同时， native-highcharts-wrapper 的文档也非常完整，可以帮助你处理更高级的图表制作。这是让前端开发人员不可或缺的工具之一。
结论
通过本文的教程和示例代码，我们已经成功的演示了使用 native-highcharts-wrapper 的基本方法，无论是在基础图表还是处理大量数据方面，它都是使用 Highcharts 库的好选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c1881e8991b448ebb51