脚本宝典收集整理的这篇文章主要介绍了js实例教程-Chart.js的环境搭建与初步使用教程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

 <canvas id=";myChart" width="400" height="400"></canvas>   <script>   VAR ctx = document.getElementById("myChart");   var myChart = new Chart(ctx, {       tyPE: &#39;bar',       data: {           labels: ["red", "Blue", "Yellow", "Green", "Purple", "Orange"],           datasets: [{               label: '# of Votes',               data: [12, 19, 3, 5, 2, 3],               backgroundColor: [                   'rgba(255, 99, 132, 0.2)',                   'rgba(54, 162, 235, 0.2)',                   'rgba(255, 206, 86, 0.2)',                   'rgba(75, 192, 192, 0.2)',                   'rgba(153, 102, 255, 0.2)',                   'rgba(255, 159, 64, 0.2)'               ],               borderColor: [                   'rgba(255,99,132,1)',                   'rgba(54, 162, 235, 1)',                   'rgba(255, 206, 86, 1)',                   'rgba(75, 192, 192, 1)',                   'rgba(153, 102, 255, 1)',                   'rgba(255, 159, 64, 1)'               ],               borderWidth: 1           }]       },       options: {           scales: {               yAxes: [{                   ticks: {                       beginAtZero:true                   }               }]           }       }   });   </script> 

Chart.js是一个基于html5的开源javascript图表库，可以实现动画效果的各种图表，生动地展示数据，包括折线图，柱状图，饼图等等。

1.Chart.js环境搭建

Chart.js文件的获取方法有很多，博主选择了最简单的方法——从github上获取。

其中包含两个版本

(1)文件：

dist/Chart.js

dist/Chart.min.js

此版本仅包含 Chart.js。此版本不包含moment.js，无法使用时间轴。

(2)文件:

dist/Chart.bundle.js

dist/Chart.bundle.min.js

bundle 版集成了moment.js文件。如果你想使用时间轴并希望包含单个文件，则应该使用该版本。如果你已经在应用程序中引用了 Moment.js，请使用上面的构建方式，不然将会在程序中包含两个 Moment.js，这样会导致页面加载时间增加或潜在的版本引用问题。

2.Chart.js初步使用

这里采用了官方文档中的默认柱状图实现：

 <canvas id="myChart" width="400" height="400"></canvas>   <script>   var ctx = document.getElementById("myChart");   var myChart = new Chart(ctx, {       type: 'bar',       data: {           labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],           datasets: [{               label: '# of Votes',               data: [12, 19, 3, 5, 2, 3],               backgroundColor: [                   'rgba(255, 99, 132, 0.2)',                   'rgba(54, 162, 235, 0.2)',                   'rgba(255, 206, 86, 0.2)',                   'rgba(75, 192, 192, 0.2)',                   'rgba(153, 102, 255, 0.2)',                   'rgba(255, 159, 64, 0.2)'               ],               borderColor: [                   'rgba(255,99,132,1)',                   'rgba(54, 162, 235, 1)',                   'rgba(255, 206, 86, 1)',                   'rgba(75, 192, 192, 1)',                   'rgba(153, 102, 255, 1)',                   'rgba(255, 159, 64, 1)'               ],               borderWidth: 1           }]       },       options: {           scales: {               yAxes: [{                   ticks: {                       beginAtZero:true                   }               }]           }       }   });   </script> 

效果：

此外又实现了一个饼状图：

在之后的学习中会将Chart.js与后台数据库联系起来，实现与数据库的动态交互

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-Chart.js的环境搭建与初步使用教程全部内容，希望文章能够帮你解决js实例教程-Chart.js的环境搭建与初步使用教程所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。