Chart.js的环境搭建与初步使用教程

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与后台联系起来，实现与数据库的动态交互