如何使用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/

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190917A0AOBR00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券