chart.js(2.4)笔记

1.引入Chart.js库

<script type="text/javascript" src="js/jquery-1.11.3.js">/script><script type="text/javascript" src="js/chart.js"></script>

2.设置画布及样式

//需要固定尺寸时需要在options中设置 responsive : false<canvas id="myChart" width="400" height="400"></canvas>

3.获取画布对象

//适应多种选择器var ctx = document.getElementById("myChart");var ctx = document.getElementById("myChart").getContext("2d");var ctx = $("#myChart");var ctx = $("#myChart")[0];var ctx = "myChart";

4.初始化图表
4.1（2.0+）

var chartInstance = new Chart(ctx, {                        type : 'line',                         //图表数据                        data : data,                         //图表参数                        options : options                    });

4.2（1.0+）

var myLineChart = Chart.Line(ctx, {                                        data : data,                                         options : options                                    });

4.3

//图表样式type : {            line : 曲线图,         bar : 柱状图,         horizontalBar : 横向柱状图,         radar : 蜘蛛网（雷达）图,         polarArea : 极地区域图,         pie : 饼状图,         doughnut : 甜甜圈图,         bubble : ？？？}

5.图表数据

data : {        //数据标签，字符串数组        labels : ["标签1", ...],         //数据集，object数组        datasets : [{}, ...],         //xy轴标签        xLabels : ["", ...],         yLabels : ["", ...]}, 

5.1曲线图 :
5.1.1 : 曲线图数据

datasets :{        //当前数据组名                    --》 String        label : "2015",         //数据同外层labels对应         --》 Array<Number>           data : [65, 59, 90, 81, 56, 55, 40],         // TODO                         --》 String        xAxisID : "",         yAxisID : "",         //是否填充(线条下方区域填充)    --》 Boolean        fill : true,         // TODO                         --》 String        cubicInterpolationMode : "",         //贝塞尔曲线 值为0时为折线图    --》 Number        lineTension : 0,         //线下填充色，=fillColor      --》 Color        backgroundColor : "rgba(220, 220, 220, 0.5)",         //线条宽度                      --》 Number        borderWidth : 3,         //线条颜色，=strokeColor     --》 Color        borderColor : "rgba(220, 220, 220, 0.5)",         // TODO                         --》 String        borderCapStyle : "",         //线条样式 : 虚线             --》         borderDash : [1, ...],         borderDashOffset : 1,         borderJoinStyle : "",         //点外圈颜色                 --》 Color or Array<Color>        pointBorderColor : "rgba(220, 220, 220, 0.5)",         //点的颜色                      --》 Color or Array<Color>        pointBackgroundColor : "rgba(220, 220, 220, 0.5)",         //点外圈宽度                 --》 Number or Array<Number>        pointBorderWidth : 3,         //点半径                       --》 Number or Array<Number>        pointRadius : 3,         // TODO                         --》 Number or Array<Number>        pointHitRadius : 3,         //鼠标悬浮时点半径              --》 Number or Array<Number>        pointHoverRadius : 3,         //鼠标悬浮时点的颜色         --》 Color or Array<Color>        pointHoverBackgroundColor : "rgba(220, 220, 220, 0.5)",         //鼠标悬浮时点边框颜色            --》 Color or Array<Color>        pointHoverBorderColor : "rgba(220, 220, 220, 0.5)",         //鼠标悬浮时点半径              --》 Number or Array<Number>        pointHoverBorderWidth : 3,         //点的样式                      --》 String, Array<String>, Image, Array<Image>        pointStyle : "triangle",         //是否绘制线条                    --》 Boolean        showLine : true,         //有空数据时是否绘制         --》 Boolean        spanGaps : false,         //是否为阶梯图        steppedLine : false}

6.options
6.1 全局options

options : {        //是否自适应尺寸               --》 Boolean        responsive : true,         //缩放时绘制图标时间         --》 Number        responsiveAnimationDuration : 0,         //缩放时是否保持长宽比            --》 Boolean        maintainAspectRatio : true,         //悬停事件触发时机              --》 Array<String>        events : ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"],         //点击事件                      --》 function        onClick : function(){},         //缩放时调用                 --》 function        //获取两个参数 : 图表实例及新尺寸        onResize : function(chart, size){},         // TODO        legendCallback : function (chart) {}, }

6.2 layout 布局

options : {    //设置图表内边距               --》 Number or Object    layout : {        padding : {             left : 10,             top : 20        }    }}

6.3 title 标题

options : {    title : {        //是否显示，默认否          --》 Boolean        display : false,         //标题显示位置                --》 String        //'top', 'left', 'bottom', 'right'.        position : "top",         //宽屏布局  TODO            --》 Boolean        //标题是否贴边显示、全屏居中        fullWidth : true,        //标题样式        fontSize : 12,        fontFamily : "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",        fontColor : "bold",        //标题上下边距                --》 Number        padding : 10,        //标题文本内容                --》 String        text : ""    }}

6.4 legend 图例

options : {        legend : {            //是否显示，             --》 Boolean            display : true,             //标题显示位置                --》 String            //'top', 'left', 'bottom', 'right'.            position : "top",             //宽屏布局  TODO            --》 Boolean            //标题是否贴边显示、全屏居中            fullWidth : true,            //TODO 如何添加事件并调用原来的function            //点击时触发             --》 function            onClick : function(event, legendItem) {},            //鼠标悬浮时触发           --》 function            onHover : function(event, legendItem) {},            //图例标签                  --》 object            labels : null,            //是否颠倒显示                --》 Boolean            reverse : false        }    }

6.4.1 labels 图例标签

options : {    legend : {        labels : {            //图例框宽度         --》 Number            boxWidth : 40,            //图例字体样式            fontSize : 12,            fontStyle : "normal",            fontColor : "#666",            fontFamily : "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",            //图例上下边距            --》 Number            padding : 10,            //图例生成时触发       --》 function            generateLabels : function(chart) {}            //是否以点显示图例      --》 Boolean            //设置为true时boxWidth无效            usePointStyle : false        },    }}

6.5 line 曲线图

options: {        elements : {            line : {                //曲线张力，为0时为拉伸状态 = lineTension                tension : 0.4,                backgroundColor : rgba(0,0,0,0.1),                borderWidth                borderColor                borderCapStyle                borderDash                borderDashOffset                borderJoinStyle                capBezierPoints                fill                stepped            }        }    }

6.6 悬停

options: {        hover : {            intersect : true,            //悬停标签出现动画时间            animationDuration : 400,            //悬停事件，注意需要限制触发            onHover ： null，        }    }

6.7 动画

options: {    animation : {        //动画显示时间，为0时为不显示        duration ： 1000，        //动画样式        easing ：“easeOutQuart”，        //动画绘制每个过程调用        onProgress ： null，        //动画绘制完成调用        onComplete ： null，    }}

6.7.1 动画样式（http://www.runoob.com/jqueryui/api-easings.html）

'linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce'

6.8 elements（http://www.chartjs.org/docs/#chart-configuration-element-configuration）

6.9 tooltips

options: {        tooltips : {            //启用            enabled : true,            //定制            custom            mode            //是否在交叉点显示            intersect            //显示位置            position            //背景            backgroundColor            titleFontFamily            titleFontSize            titleFontStyle            titleFontColor        }    }

7.混合图表类型

当创建图表，你必须设置总type为bar。
当创建一个图表，你必须对彼此顶部作为单独的数据集覆盖不同的图表类型的选项。
要做到这一点，你必须设置一个type单独为每个数据集。您可以创建混合图表类型酒吧和线图表类型。

★ 1.悬浮框颜色随数据点颜色
2.图例框颜色随线条及填充颜色
3.数据点颜色随线条及填充颜色

8.数轴设置（http://www.chartjs.org/docs/#scales）

options: {        scales : {            yAxes : [{                gridLines ： {}            }]        }    }

8.1 设置固定尺寸

options: {    scales : {        yAxes : [{            ticks : {                min : 0,                max : 20            }        }]    }   }