统计图的使用(chart)

Bootstrop统计图表插件Chart.js的介绍以及简单使用方式(采摘于

南窗寄傲琴书消忧

)

在项目中关于数据方面难免要生成报表，曲线图，柱状图，蛛网图等一些图表以便于观察数据走势，在做相应网站的时候肯定会用到，学习记录！

• 准备
• Chart.js或者是Chart.bundle.js
• 如果考虑浏览器兼容还需下载
• excanvas.js
• 下载地址
• https://github.com/nnnick/Chart.js
• chart.js中文文档
• http://www.bootcss.com/p/chart.js/docs/

---

曲线图（Line Chart）

要看一系列数据的走势我们就要采用曲线图，能一目了然看见数据的趋势变化。

首先

引入图表的js文件

<script src="Chart.js"></script>
或者是
<script src="Chart.bundle.js"></script>

有需要的引入jquery的js文件或者是兼容浏览器的js文件

<script src="jquery.min.js"></script>
<script src="excanvas.js"></script>

• 1
• 2

图表区域

设置图表放置区域 
我们可以把图表的canvas放在一个Div区域里面,当然位置可以自己设置任意放置

<div>
<canvas id="canvas"></canvas>
</div>

实例化Chart对象

对象的实例化的脚本要写在canvas画布的后面，否则可能会包js错误。

<script>
//图表的结构配置
var config = {
            type: 'line',//图标类型，如网状图是radar
            data: {
                labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],//X轴显示的标签 
                datasets: [{//数据格式 多少人每个人什么标签 图例 样式是什么json格式
                    label: "张三年度业绩表",//图例 每个人的曲线名字
                    backgroundColor: window.chartColors.red,//代表这个人的数据夜色
                    borderColor: window.chartColors.red,
                    data: [
                        20,30,60,64,65,70,76//这个人的业绩情况，也就是表格数据
                    ],
                    fill: false,//是否填充 是否用背景色填充表格
                }, {//第二个数据 更多人数据也可以这样填充
                    label: "李四年度业绩表",
                    fill: false,
                    backgroundColor: window.chartColors.blue,
                    borderColor: window.chartColors.blue,
                    data: [
                        60,34,56,28,12,32,53
                    ],
                }]
            },
            options: {//表格样式
                responsive: true,//是否自适应
                title:{
                    display:true,//是否展示标题
                    text:'业绩表'//图表标题
                },
                tooltips: {//工具提示
                    mode: 'index',
                    intersect: false,
                },
                hover: {//鼠标悬停的时候的数据展示
                    mode: 'nearest',
                    intersect: true
                },
                scales: {//刻度设置
                    xAxes: [{//X轴设置
                        display: true,//是否显示
                        scaleLabel: {//刻度标签
                            display: true,
                            labelString: '月份'//标签名字
                        }
                    }],
                    yAxes: [{//y轴标签
                        gridLines: {//网格线
                            drawBorder: false//画边框,
                            color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']//颜色
                        },
                        display: true,
                        scaleLabel: {//同上
                            display: true,
                            labelString: '业绩量'
                        }
                    }]
                }
            }
        };
 window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx, config);
</script>

图表样式

网格表

表格样式不同就是表格的设置不同而已其他都是差不多的

网格表的设置

代码一样的只是把类别修改了一下

var configwan = {
            type: 'radar',
            data: {
                labels: ["吃饭", "喝水", "睡觉", "敲代码", "玩游戏", "骑单车", "跑步"],
                datasets: [{
                    label: "李四的生活网格表",
                    backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
                    borderColor: window.chartColors.red,
                    pointBackgroundColor: window.chartColors.red,
                    data: [3, 1, 8, 5, 3, 1, 4]
                }, {
                    label: "张三的生活网格表",
                    backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
                    borderColor: window.chartColors.blue,
                    pointBackgroundColor: window.chartColors.blue,
                    data: [5, 1, 5, 5, 6, 2, 0]
                },]
            },
            options: {
                legend: {
                    position: 'top',//图例的位置
                },
                title: {
                    display: true,
                    text: '网格表'//标题
                },
                scale: {//刻度从零开始
                    ticks: {
                        beginAtZero: true
                    }
                }
            }
        };
        //实例化对象
         window.onload = function() {
         //不要忘记给这个画布一个id
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myRadar = new Chart(document.getElementById("wan"), configwan);

其他图表

图表样式应用其实都差不多，只是各种配置不同而已，想做出自己想要的样式，自己看api自己慢慢修改就好了，Chart.js就介绍到这里了。