如何使用CHARTJS创建JAVASCRIPT图表

如果你有一个信息丰富的网站或应用程序，你可能希望可视化您的数据，以便用户可以更好地理解它。虽然表在某些情况下非常有用，例如定价和特征比较表，但在某种数据可视化的帮助下，其他类型的信息更容易处理。Chart.js等JavaScript库允许您生成不同类型的HTML5图表，如线条，条形图，饼图，圆环图和面积图。

Chart.js是一个多功能库，可让你在几分钟内创建JavaScript图表。它有许多选项，你可以使用它们配置图表的所有方面。在本教程中，我们将研究如何设置Chart.js库，你的选项是什么，以及你可以使用它实现的目标。我们还将创建两个图表：显示六个国家预期寿命的条形图和显示建议的日常饮食的环图/饼图。

将CHART.JS添加到HTML页面

你可以以不同的方式安装Chart.js.如果要在本地存储整个库，可以使用以下命令使用npm包管理器安装它：

安装模块后，按照以下方式将缩小版本添加到HTML页面底部，在结束标记之前：

你的自定义脚本将进入script.js文件。或者，也可以使用模块加载器（如CommonJS或Webpack）将脚本添加到页面中。

如果不想在本地存储Chart.js库，可以使用以下代码从CDN添加它：

或者，可以直接从GitHub仓库克隆最新版本的Chart.js。但请注意，GitHub repo没有预先构建的发行版本，因此需要自己将库构建到单个文件中。

设置HTML

使用Chart.js，你可以使用元素将JavaScript图表添加到HTML页面。在HTML文件中，在标记内（标记上方）添加以下代码：

Chart.js会将您的图表放在元素中。虽然图表将使用JavaScript创建，但它会在您的页面上显示为PNG图像文件。

现在，需要将自定义配置添加到script.js文件中。下面，我们将向你展示如何创建两种图表：垂直条形图和饼图。但是，你可以对任何其他图表类型使用相同的逻辑。在Chart.js文档中，你可以查看你有权访问的所有图表类型。

使用JAVASCRIPT创建条形图

我们的条形图将按世界人口评论的国家数据集显示预期寿命。它将显示六个预期寿命最高的国家，具体如下：

我们将创建一个带有交互式工具提示的垂直条形图，当用户将条形悬停时，它将显示确切的数据。但是，请注意，也可以使用Chart.js创建水平条形图。在下面的gif演示中，你可以看到我们的图表如何：

Chart.js需要两个变量：一个用于捕获HTML元素（在下面的示例中为ctx），另一个用于保存自定义Chart对象（下面的myChart）。我们需要添加国家/地区的名称作为labels属性的值。并且，我们将数据（预期寿命，以年为单位）定义为数据集数组的数据属性的值。

以下代码进入自定义script.js文件：

Chart.js的文档非常好，因此你可以在Bar页面上找到我们上面使用的所有选项（backgroundColor，borderColor，borderWidth等）。

使用JAVASCRIPT创建圆环图

现在，让我们使用Chart.js库创建一个圆环图。它将根据以下StatCrunch数据集显示推荐的日常饮食分布：

在这里，我们不希望显示交互式工具提示，而是以下列方式在图表顶部显示数据标签和值：

安装数据标签插件

由于Chart.js没有在图表顶部显示标签的选项，我们需要使用Chart.js数据标签插件。Chart.js允许开发人员通过创建插件来扩展默认功能。目前，GitHub上有五个Chart.js插件可用于以下功能：

数据标签（我们将使用这个），

放大，

注解，

财务图表，

推迟初始图表更新。

Chart.js Data Labels插件有很好的文档;你可以找到你可能需要的一切。你可以使用以下命令使用npm软件包管理器安装它，也可以从CDN添加最新版本的库。

添加自定义JAVASCRIPT

JavaScript使用与以前相同的元素，或者，如果要保留两个图表，可以使用不同的ID向HTML添加新画布：

在JavaScript中，我们现在将图表类型定义为甜甜圈。其余代码遵循与以前相同的逻辑。我们将数据添加为数据对象的标签和数据集属性的值。

如你所见，我们已将Data Labels插件的设置添加到圆环图的options.plugin属性中。该formatter()方法在我们的图表的顶部放置数据标签。

创建相同数据集的饼图

由于Chart.js是一个非常通用的插件，你可以轻松地将上述数据集转换为饼图。环图和饼图都用于数据分布的呈现，因此它们具有相同的设置。你需要在代码中更改的唯一内容是图表的类型：

这是以饼图形式显示的相同数据集：

你还可以通过编辑formatter()方法选择仅显示百分比，如下所示：

创建其他类型的图表

使用Chart.js，你还可以创建许多其他图表类型，例如线，雷达，气泡，散点图，区域和混合图表。该文档还有一个Samples页面，您可以在其中找到所有图表类型的实时示例。

虽然你无法直接获取示例的JavaScript代码，但你可以使用浏览器的开发人员工具访问它（在大多数浏览器中，你需要点击F12键）。但请注意，实时样本使用的不同于我们在文章中使用的变量，因此你需要对代码进行修改：

以上文章摘自：https://www.developerdrive.com/chartjs-create-javascript-chart/