Chart.js图表库入门-优快云博客

chart.js是一个基于HTML5的简单的面向对象的图表库，它有6 种表，分别是：曲线图、柱状图、雷达图、饼状图、极坐标区域图、以圆环图。

使用方法

Step1. 引用chart.js

<script src="js/Chart.min.js"></script>

注意：cahrt.js不依赖于jquery

Step2. 在页面中定义 canvas

<canvas id="myChart" width="400" height="400"></canvas>

Step3. 写js

曲线图：


    
    
      
      
       
       
      
      
      
      
       
                       
        
        var ctx = 
        
        document.getElementById(
        
        "myChart").getContext(
        
        "2d");
       
       
      
      

      
      
       
       
      
      
      
      
       
                       
        
        var data = {
       
       
      
      

      
      
       
       
      
      
      
      
       
                               
        
        /// 表现在X轴上的数据，数组形式
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                                     labels : [
        
        "January",
        
        "February",
        
        "March",
        
        "April",
        
        "May",
        
        "June",
        
        "July"],
       
       
      
      

      
      
       
       
      
      
      
      
       
                                
        
        /// 第一条线
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                                     datasets : [
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                                     {
       
       
      
      

      
      
       
       
      
      
      
      
       
                                            
        
        /// 曲线的填充颜色
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                                                 fillColor : 
        
        "rgba(220,220,220,0.5)",
       
       
      
      

      
      
       
       
      
      
      
      
       
                                            
        
        /// 填充块的边框线的颜色
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                                                 strokeColor : 
        
        "rgba(220,220,220,1)",
       
       
      
      

      
      
       
       
      
      
      
      
       
                                            
        
        /// 表示数据的圆圈的颜色
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                                                 pointColor : 
        
        "rgba(220,220,220,1)",
       
       
      
      

      
      
       
       
      
      
      
      
       
                                            
        
        /// 表示数据的圆圈的边的颜色
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                                                 pointStrokeColor : 
        
        "#fff",
       
       
      
      

      
      
       
       
      
      
      
      
       
                                                
        
        data : [
        
        65.5,
        
        59.2,
        
        90,
        
        81,
        
        56,
        
        55,
        
        40]
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             },
       
       
      
      

      
      
       
       
      
      
      
      
       
                            
        
        /// 第二条线
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             {
       
       
      
      

      
      
       
       
      
      
      
      
       
                                        
        
        fillColor : 
        
        "rgba(151,187,205,0.5)",
       
       
      
      

      
      
       
       
      
      
      
      
       
                                        
        
        strokeColor : 
        
        "rgba(151,187,205,1)",
       
       
      
      

      
      
       
       
      
      
      
      
       
                                        
        
        pointColor : 
        
        "rgba(151,187,205,1)",
       
       
      
      

      
      
       
       
      
      
      
      
       
                                        
        
        pointStrokeColor : 
        
        "#fff",
       
       
      
      

      
      
       
       
      
      
      
      
       
                                        
        
        data : [
        
        28,
        
        48,
        
        40,
        
        19,
        
        96,
        
        27,
        
        100]
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                                 }
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             ]
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                         }
       
       
      
      

      
      
       
       
      
      
      
      
       
                        
        
        /// 动画效果call
       
       
      
      

      
      
       
       
      
      
      
      
       
                        
        
        var options = {
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
                            
        
        scaleFontStyle: 
        
        "normal"
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                       }
       
       
      
      

      
      
       
       
      
      
      
      
       
                        
        
        /// 创建对象，生成折线图表
       
       
      
      

      
      
       
       
      
      
      
      
       
                       
        
        new Chart(ctx).Line(data,options);

注意：如果要展示在图标中的数据是从后台获得的，需要把要展示在x轴的数据和y轴的数据分别放到两个数组中,动画效果可以进行设置也可不进行设置，如果不设置所有的参数都是默认值并在最后生成图表的时候也不传定义参数的变量（就是代码中的options变量）。

效果图如下：

这个效果就是在动画效果中不设置任何参数时的效果

柱状图：

柱状图的数据格式和曲线图的数据格式相同，代码中唯一不同的就是在创建对象生成图表时，柱状图的如下：

                new Chart(ctx).Bar(data);

效果图如下：

雷达图

雷达图的数据格式和曲线图的数据格式相同，代码中唯一不同的就是在创建对象生成图表时，雷达图的如下：

                new Chart(ctx).Radar(data);

效果图如下

：

饼状图

饼状图的数据格式如下：

var ctx = document.getElementById("myChart").getCOntext("2d);

var pieData = [ { value: 30, color:"#F38630" }, { value : 50, color : "#E0E4CC" }, { value : 100, color : "#21323D" }, { value : 24, color : "#69D2E7" }, { value : 82, color : "#7D4F6D" }, { value : 58, color : "#9D9B7F" } , { value : 24, color : "#21323D" } ]//动画效果的参数是如若需要可以自行定义 new Chart(ctx).Pie(pieData);

效果图如下：

极坐标图：

极坐标图的数据结构和饼状图的数据结构相同，唯一不同的就是在创建对象生成图表的时的代码，极坐标图的如下：

new Chart(ctx).PolarArea(pieData);

效果图如下：

圆环图：

圆环图的数据结构和饼状图的数据结构相同，唯一不同的就是在创建对象生成图表的时的代码，圆环图的如下：

                new Chart(ctx).Doughnut(pieData);

效果图如下：

chart.js 参数说明：


    
    
      
      
       
       
      
      
      
      
       
       
        
                             //网格线是否在数据线的上面
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleOverlay : false,
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             //是否用硬编码重写y轴网格线
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleOverride : false,
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             //** Required if scaleOverride is true **
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             //y轴刻度的个数
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleSteps : null,
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             //y轴每个刻度的宽度
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleStepWidth : null,
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // Y 轴的起始值
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleStartValue : 0,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // Y/X轴的颜色
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleLineColor: "rgba(0,0,0,.1)",
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // X,Y轴的宽度
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleLineWidth: 1,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 刻度是否显示标签, 即Y轴上是否显示文字
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleShowLabels: true,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // Y轴上的刻度,即文字
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleLabel: "
        
        <%=value%>",
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 字体
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleFontFamily: "'Arial'",
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 文字大小
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleFontSize: 16,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 文字样式
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleFontStyle: "normal",
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 文字颜色
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleFontColor: "#666",
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 是否显示网格 
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleShowGridLines: true,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 网格颜色
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleGridLineColor: "rgba(0,0,0,.05)",
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 网格宽度
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             scaleGridLineWidth:2,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 是否使用贝塞尔曲线? 即:线条是否弯曲
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             bezierCurve: true,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 是否显示点数
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             pointDot: true,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 圆点的大小
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             pointDotRadius:5,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 圆点的笔触宽度, 即:圆点外层白色大小
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             pointDotStrokeWidth: 2,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 数据集行程(连线路径)
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             datasetStroke: true,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 线条的宽度, 即:数据集
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             datasetStrokeWidth: 2,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 是否填充数据集
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             datasetFill: true,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 是否执行动画
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             animation: true,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 动画的时间
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             animationSteps: 60,
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 动画的特效
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             animationEasing: "easeOutQuart",
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                             // 动画完成时的执行函数
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                            onAnimationComplete: null