chart.js使用学习

最新推荐文章于 2024-05-17 02:07:51 发布

gc_2299

最新推荐文章于 2024-05-17 02:07:51 发布

阅读量3.4k

点赞数 4

分类专栏：网页编程文章标签： HTML Canvas chart.js

本文链接：https://blog.csdn.net/gc_2299/article/details/119272319

版权

网页编程专栏收录该内容

138 篇文章 8 订阅

订阅专栏

chart.js是用JavaScript编写的基于Canvas的开源图表库，其官网、文档及源码地址请见参考文献1-3。本文开始学习该图表库的使用方法，本文主要介绍chart.js的安装及使用示例。

安装

根据参考文献2，chart.js有几种安装使用方式，可以用npm安装，也可以CDN方式使用，还可以直接在GitHub上下载编译的最新的js文件直接在网页中使用。本文采用最后一种方式。
访问参考文献2，目前最新的chart.js版本为V3.5，在页面最底部提供有下载链接，直接下载编译的tgz文件即可。
在这里插入图片描述打开压缩文件，在package/dist文件夹中有三类chart.js文件，具体说明如下。本文测试时使用chart.js文件。

chart.js：源码文件
chart.esm.js：预编译调试时， EcmaScript Module（ES MODULE)，支持import from 最新标准的
chart.min.js：压缩版的源码文件。

在这里插入图片描述

使用示例

本文使用参考文献4中的代码进行测试，主要是测试功能，后续文章中会根据chart.js官网中的文档一一学习并测试每类图表。
测试代码主要参考自参考文献4，这里就不重复粘贴代码，代码的测试效果如下：
在这里插入图片描述值得说明的是，如果在页面的body标签下直接使用Canvas，使用chart.js绘制的图形会充满整个页面，如果需要调整图表大小，可以在Canvas外面再嵌套div标签，然后设置div的尺寸即可。

	<body>
	    <div style="height:50%;width:50%;">
	        <canvas id="myChart" ></canvas>
	    </div>

参考文献：
[1]https://www.chartjs.org/
[2]https://www.chartjs.org/docs/latest/getting-started/installation.html
[3]https://github.com/chartjs/Chart.js/releases/tag/v3.5.0
[4]https://blog.csdn.net/cddcj/article/details/75542565
[5]https://blog.csdn.net/qq_25652949/article/details/82735658?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control
[6]https://chartjs.bootcss.com/docs/