Deno 是一个新兴的 JavaScript 和 TypeScript 环境，它具有安全性高、模块化建设、多平台支持、支持最新 ES 标准等诸多优秀特性。很多前端开发者已经开始了解 Deno 并用它进行开发。而其中一个前端项目常常需要的功能是显示各种各样的图表。如何在 Deno 中使用第三方图表库，是本文将要给大家介绍的内容。
选择图表库
在 Deno 中使用第三方图表库，首先要面对的问题就是选择图表库。Deno 的开发者社区还是比较小的，能够兼容 Deno 的图表库比较少。在这里，我给大家推荐两个比较好的图表库。
Chart.js
Chart.js 是一个兼容 Deno 的优秀图表库。它内置了各种各样的图表类型，包括线图、柱状图、饼图、雷达图、极地图、气泡图等等。使用 Chart.js，可以轻松地实现各种各样的数据可视化图表。
ECharts
ECharts 是一款基于 JavaScript 和 Canvas 的开源可视化库，内置了十几种图表类型，如折线图、柱状图、散点图、饼图、地图等。它的特点是易于上手、可定制性强、性能优秀。
安装第三方库
在 Deno 中，通过 import 关键字可以导入第三方库。因此，首先要做的就是安装第三方图表库。以 Chart.js 为例，安装命令如下：
deno install --allow-read --allow-net --allow-env https://deno.land/x/chartjs@latest
这个命令会从 Deno 的官方代码库中下载并安装最新版本的 Chart.js。后面三个参数分别是允许访问本地文件、访问网络、读取环境变量，这是 Chart.js 所需要的权限。
使用 Chart.js
使用 Chart.js 很简单，下面是一个示例代码：
-- -------------------- ---- -------
-- -- --------
------ ----- ---- -----------------------------------
-- -----
----- --- - -----------------------------------
----- ------- - --- ---------- -
----- ------
----- -
------- ------- ------- --------- -------- --------- ----------
--------- -
-
------ -- -- -------
----- ---- --- -- -- -- ---
---------------- -
---------- --- ---- ------
--------- ---- ---- ------
---------- ---- --- ------
--------- ---- ---- ------
---------- ---- ---- ------
---------- ---- --- ------
--
------------ -
---------- --- ---- ----
--------- ---- ---- ----
---------- ---- --- ----
--------- ---- ---- ----
---------- ---- ---- ----
---------- ---- --- ----
--
------------ --
--
--
--
-------- -
------- -
-- -
------------ -----
--
--
--
---这个示例中使用了 Chart.js 绘制了一个柱状图。首先，通过 import 导入了 Chart.js，然后新建一个 Canvas 元素，通过 getElementById 获取该元素的上下文，最后使用 new Chart(ctx, options) 创建一个图表实例。其中，第一个参数 ctx 表示上下文对象，第二个参数 options 包含了图表的配置项。
使用 ECharts
使用 ECharts 的方法与使用 Chart.js 类似，下面是一个示例代码：
-- -------------------- ---- -------
-- -- -------
------ - -- ------- ---- -----------------------------------------
-- -----
----- -------- - -----------------------------------
----- ------- - -----------------------
----- ------ - -
------ -
----- -----------
----- ------- ------ ------ ------ ------ ------ -------
--
------ -
----- --------
--
------- -
-
----- ----- ---- ---- ---- ----- ----- ------
----- ------
--
--
--
--------------------------这个示例中使用了 ECharts 绘制了一个柱状图。首先，通过 import 导入了 ECharts，然后创建一个 DOM 元素，通过 echarts.init(chartDom) 初始化图表实例，最后使用 myChart.setOption(option) 设置图表的配置项。
总结
本文介绍了如何在 Deno 中使用第三方图表库。通过本文的介绍，相信大家已经掌握了如何选择和使用 Chart.js 和 ECharts 绘制各种各样的图表。图表是数据可视化的重要手段之一，在开发前端项目时，合理地使用图表库可以使得数据更加易于理解和分析。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65aed08eadd4f0e0ff847e1d