Deno 中如何使用第三方图表库

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 from "https://cdn.skypack.dev/chart.js";

// 绘制柱状图
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          "rgba(255, 99, 132, 0.2)",
          "rgba(54, 162, 235, 0.2)",
          "rgba(255, 206, 86, 0.2)",
          "rgba(75, 192, 192, 0.2)",
          "rgba(153, 102, 255, 0.2)",
          "rgba(255, 159, 64, 0.2)",
        ],
        borderColor: [
          "rgba(255, 99, 132, 1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)",
          "rgba(153, 102, 255, 1)",
          "rgba(255, 159, 64, 1)",
        ],
        borderWidth: 1,
      },
    ],
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  },
});

这个示例中使用了 Chart.js 绘制了一个柱状图。首先，通过 import 导入了 Chart.js，然后新建一个 Canvas 元素，通过 getElementById 获取该元素的上下文，最后使用 new Chart(ctx, options) 创建一个图表实例。其中，第一个参数 ctx 表示上下文对象，第二个参数 options 包含了图表的配置项。

使用 ECharts

使用 ECharts 的方法与使用 Chart.js 类似，下面是一个示例代码：

// 导入 ECharts
import * as echarts from "https://cdn.skypack.dev/echarts@latest";

// 绘制柱状图
const chartDom = document.getElementById("myChart");
const myChart = echarts.init(chartDom);
const option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "bar",
    },
  ],
};
myChart.setOption(option);

这个示例中使用了 ECharts 绘制了一个柱状图。首先，通过 import 导入了 ECharts，然后创建一个 DOM 元素，通过 echarts.init(chartDom) 初始化图表实例，最后使用 myChart.setOption(option) 设置图表的配置项。

总结

本文介绍了如何在 Deno 中使用第三方图表库。通过本文的介绍，相信大家已经掌握了如何选择和使用 Chart.js 和 ECharts 绘制各种各样的图表。图表是数据可视化的重要手段之一，在开发前端项目时，合理地使用图表库可以使得数据更加易于理解和分析。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65aed08eadd4f0e0ff847e1d