chart.js使用学习
??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的尺寸即可。
參考文獻：
[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/
總結
以上是生活随笔為你收集整理的chart.js使用学习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 最详细的【微信小程序+阿里云Web服务】
- 下一篇： 方正飞鸿智能信息平台产品白皮书（二）