var data = { labels : ["January","February","March","April","May","June","July"], datasets : [ { fillColor : "rgba(220,220,220,0.5)", strokeColor : "rgba(220,220,220,1)", data : [65,59,90,81,56,55,40] }, { fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", data : [28,48,40,19,96,27,100] } ] }
图标参数：
Bar.defaults = { //网格线是否在数据线的上面 scaleOverlay : false, //是否用硬编码重写y轴网格线 scaleOverride : false, //** Required if scaleOverride is true ** //y轴刻度的个数 scaleSteps : null, //y轴每个刻度的宽度 scaleStepWidth : null, //Y轴起始值 scaleStartValue: null, // Y/X轴的颜色 scaleLineColor: "rgba(0,0,0,.1)", // X,Y轴的宽度 scaleLineWidth: 1, // 刻度是否显示标签, 即Y轴上是否显示文字 scaleShowLabels: false, // Y轴上的刻度,即文字 scaleLabel: "<%=value%>", // 字体 scaleFontFamily: "'Arial'", // 文字大小 scaleFontSize: 12, // 文字样式 scaleFontStyle: "normal", // 文字颜色 scaleFontColor: "#666", // 是否显示网格 scaleShowGridLines: true, // 网格颜色 scaleGridLineColor: "rgba(0,0,0,.05)", // 网格宽度 scaleGridLineWidth: 1, //Bar Chart图表特定参数： //是否绘制柱状条的边框 barShowStroke : true, //柱状条边框的宽度 barStrokeWidth : 2, //柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果，请控制合理数值) barValueSpacing :5, //每组柱状条组中柱状条之间的间距 barDatasetSpacing :5, // 是否显示提示 showTooltips: true, // 是否执行动画 animation: true, // 动画的时间 animationSteps: 60, // 动画的特效 animationEasing: "easeOutQuart", // 动画完成时的执行函数 onAnimationComplete: null }
部分javascript实例
var barChart = new Chart(ctx).Bar(data, { scaleLabel: "$"+"<%=value%>", //是否绘制柱状条的边框 barShowStroke: true, //柱状条边框的宽度 barStrokeWidth: 2, //柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果，请控制合理数值) barValueSpacing: 5, //每组柱状条组中柱状条之间的间距 barDatasetSpacing: 5, });
效果图：
饼图：
javascript:
new Chart(ctx).Pie(data,options);
数据结构：
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' } ];
图标参数：
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实例：