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

创新实训——Chart.js的初步学习与使用

猜你喜欢