chart.js使用学习

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

安装

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

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

chart.js使用学习_第2张图片

使用示例

  本文使用参考文献4中的代码进行测试,主要是测试功能,后续文章中会根据chart.js官网中的文档一一学习并测试每类图表。
  测试代码主要参考自参考文献4,这里就不重复粘贴代码,代码的测试效果如下:
chart.js使用学习_第3张图片  值得说明的是,如果在页面的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/

你可能感兴趣的:(网页编程,HTML,Canvas,chart.js)