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
}
}]
}
}
类似资料：