Chart.js:用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上。基于HTML5 canvas技术,Chart.js不依赖任何外部工具库,轻量级(压缩之后仅有4.5k)。值得推荐学习!
步骤:
html部分:
rush:xhtml;">
javascript部分:
曲线图(Line chart):
html:
rush:xhtml;">
javascript:(引入及两种使用方式)
rush:js;">
数据结构:
图标参数:
rush:js;">
Line.defaults = {
//网格线是否在数据线的上面
scaleOverlay : false,//是否用硬编码重写y轴网格线
scaleOverride : false,//** required if scaleOverride is true **
//y轴刻度的个数
scaleSteps : null,//y轴每个刻度的宽度
scaleStepWidth : 20,// Y 轴的起始值
scaleStartValue : null,// Y/X轴的颜色
scaleLineColor: "rgba(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,.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*/
}
(表示刚接触Chart.js,看到这图表参数整个人都懵了,还全程英文注释,呵呵~)
理解完图表参数后,就可以自定义图表参数啦,下面来看看具体事例用法:
html部分和js文件引入部分省略:(之后的图表类型也同样省略!)
rush:js;">
效果图:
柱状图:
rush:js;">
new Chart(ctx).Bar(data,options);//简记,options可缺省
数据结构:
rush:js;">
var data = {
labels : ["January",datasets : [
{
fillColor : "rgba(220,strokeColor : "rgba(220,data : [65,40]
},{
fillColor : "rgba(151,strokeColor : "rgba(151,data : [28,100]
}
]
}
图标参数:
rush:js;">
Bar.defaults = {
//网格线是否在数据线的上面
scaleOverlay : false,//y轴每个刻度的宽度
scaleStepWidth : null,//Y轴起始值
scaleStartValue: null,即Y轴上是否显示文字
scaleShowLabels: false,// 文字大小
scaleFontSize: 12,// 文字颜色
scaleFontColor: "#666",// 网格宽度
scaleGridlinewidth: 1,//Bar Chart图表特定参数:
//是否绘制柱状条的边框
barShowstroke : true,//柱状条边框的宽度
barstrokeWidth : 2,//柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果,请控制合理数值)
barValueSpacing :5,//每组柱状条组中柱状条之间的间距
barDatasetSpacing :5,// 是否显示提示
showTooltips: true,// 动画完成时的执行函数
onAnimationComplete: null
}
部分javascript实例
rush:js;">
var barChart = new Chart(ctx).Bar(data,{
scaleLabel: "$"+"<%=value%>",//是否绘制柱状条的边框
barShowstroke: true,//柱状条边框的宽度
barstrokeWidth: 2,//柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果,请控制合理数值)
barValueSpacing: 5,//每组柱状条组中柱状条之间的间距
barDatasetSpacing: 5,});
效果图:
饼图:
javascript:
rush:js;">
new Chart(ctx).Pie(data,options);
数据结构:
rush:js;">
var data=[
{
value:40,color:"#21F0EA",//背景色
highlight:"#79E8E5",//高亮背景颜色
label:'javascript'//文字标签
},{
value:60,color:"#E0E4CC",highlight:"#EAEDD8",label:'jquery'
},{
value:100,color:"#69D2E7",highlight:"#83E5F7",label:'html'
}
];
图标参数:
rush:js;">
Pie.defaults = {
//是否显示每段行程(即扇形区,不为true则无法看到后面设置的边框颜色)
segmentShowstroke : true,//设置每段行程的边框颜色
segmentstrokeColor : "red",//心啊是每段扇区边框的宽度
segmentstrokeWidth :2,//Boolean - 是否执行动画
animation : true,//Number - 动画时间
animationSteps : 100,//String - 动画的效果
animationEasing : "eaSEOutBounce",//Boolean -是否旋转动画
animateRotate : true,//Boolean - 是否动画缩放饼图中心(效果不错)
animateScale : true,//Function - 火动画完成时执行的函数
onAnimationComplete : null
}
部分javascript实例:
rush:js;">
var ctx=document.getElementById("pieChart").getContext("2d");
window.pieChart=new Chart(ctx).Pie(data,{
//是否显示每段行程(即扇形区,不为true则无法看到后面设置的边框颜色)
segmentShowstroke : true,//每段扇区边框的宽度
segmentstrokeWidth :2,//Function - 动画完成时执行的函数
//onAnimationComplete : null
});
效果图:
环形图:
javascript:
rush:js;">
new Chart(ctx).Doughnut(data,options);
数据结构:
rush:js;">
//数据结构(与饼图相似)
var data = [{
value: 30,color: "#F7464A",highlight: "#FA7C7C",label: "angularJS"
},{
value: 50,color: "#E2EAE9",highlight: "#F2F5F5",label: "juqery"
},{
value: 100,color: "#D4CCC5",hightlight: "#DBD6D1",label: "javascript"
},{
value: 40,color: "#949FB1",highlight: "#AFBCCE",label: "nodeJS"
},{
value: 120,color: "#4D5360",highlight: "#767C86",label: "html"
}];
图标参数:
rush:js;">
Doughnut.defaults={
//是否显示每段行程(即环形区,不为true则无法看到后面设置的边框颜色)
segmentShowstroke: true,//设置每段行程的边框颜色
segmentstrokeColor: "#fff",//设置每段环形的边框宽度
segmentstrokeWidth: 2,//图标中心剪切圆的比例(0为饼图,接近100则环形宽度越小)
percentageInnerCutout: 50,//是否执行动画
animation: true,//执行动画时间
animationSteps: 100,//动画特效
animationEasing: "eaSEOutBounce",//是否旋转动画
animateRotate: true,//是否缩放图表中心
animateScale: true,//动画完成时的回调函数
// onAnimationComplete: null
}
效果图:
Chart.js总共有六大图表:除此之外,还有剩下两种:雷达图或蛛网图、极地区域图,读者请自行参考:nofollow" target="_blank" href="http://www.bootcss.com/p/chart.js/docs/">Chart.js中文文档
那么,问题来了!?图表的图例怎么办?这货在应用中也是很常用的!经过多次的查阅,找到以下方法实现图例部分,膜拜一下各路大神先!除此之外,还可以动画完成后将各组数据自动显示,而不用手动查看各组数据!
直接上各部分代码:
html部分:
rush:xhtml;">