Char.Js 学习使用

<script src="../js/Chart.js"></script> ???<div class="aui-col-xs-6" style="border:none;"><canvas id="first" width="620" height="240" style="float:left;"></canvas></div> ???<script> ???????var data = { ???????????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, 59, 90, 81, 56, 55, 1000] ???????????????}, ???????????????{ ???????????????????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] ???????????????} ???????????] ???????} ???????function myChart() { ???????????// $(‘#a_canvas‘).css(‘width‘, $(window).width()-30); ???????????//window.addEventListener("load", function () { ???????????var options = [‘现金‘, ‘红包‘, ‘碳值‘, ‘碳宝‘, ‘钻石‘, ‘铢‘]; ???????????// 获取上下文 ???????????var context = document.getElementById("first").getContext("2d"); ???????????var context1 = document.getElementById("seccend").getContext("2d"); ???????????var sthreed3 = document.getElementById("sthreed").getContext("2d"); ???????????//context.font = "20px Arial"; ???????????new Chart(context).Line(data, options); ???????} ???????myChart(); ???</script>

this.Line = function(data,options){ ???????????chart.Line.defaults = { ???????????//网格线显示在数据的上方 ???????????scaleOverlay: false, ???????????//硬编码重写y轴网格线 ???????????scaleOverride: false, ???????????//y轴刻度的个数 ???????????scaleSteps: null, ???????????//y轴每个刻度的宽度 ???????????scaleStepWidth: null, ???????????//y轴的起始值 ???????????scaleStartValue: null, ???????????//x轴和y轴的颜色 ???????????scaleLineColor: "rgba(0,0,0,0.1)", ???????????//x轴和y轴的线的宽度 ???????????scaleLineWidth: 1, ???????????//是否显示y轴的标签 ???????????scaleShowLabels: true, ???????????//标签显示值 ???????????scaleLabel: "<%=value%>", ???????????//x轴和y轴标签的字体 ???????????scaleFontFamily: "‘Arial‘", ???????????//标签字体的大小 ???????????scaleFontSize: 12, ???????????//标签字体的样式 ???????????scaleFontStyle: "normal", ???????????//标签字体的颜色 ???????????scaleFontColor: "#666", ???????????//是否显示网格线 ???????????scaleShowGridLines: true, ???????????//网格线的颜色 ???????????scaleGridLineColor: "rgba(0,0,0,.08)", ???????????//网格线的线宽 ???????????scaleGridLineWidth: 1, ???????????//是否是曲线 ???????????bezierCurve: true, ???????????//是否显示点 ???????????pointDot: true, ???????????//点的大小 ???????????pointDotRadius: 4, ???????????//点的边框的大小 ???????????pointDotStrokeWidth: 2, ???????????//是否显示数据集的笔画 ???????????datasetStroke: false, ???????????//数据线的线宽度 ???????????datasetStrokeWidth: 2, ???????????//图标上的阴影部分 ???????????datasetFill: true, ???????????//是否使用动画效果 ???????????animation: true, ???????????//动画的步骤数(帧) ???????????animationSteps: 60, ???????????//动画效果 ???????????animationEasing: "easeOutQuart", ???????????//动画完成时的回调 ???????????onAnimationComplete: null ???????};