第一步
准备好chart.js和excanvas.js(用于ie浏览器兼容)
下载地址：/nnnick/Chart.js
参考文档地址：/p/chart.js/docs/
简单介绍下：
Chart.js 是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。
6种图表类型：曲线图、柱状图、蛛网图、极地区域图、饼图和环形图
第二步
先在html页面中引用2个js，excanvas.js可以解决它在ie7，ie8兼容性问题
<script type="text/javascript" src="Chart.js"></script><!--[if lte IE 8]><script src="excanvas.js"></script><![endif]-->
准备一个canvas
<div style="width: 50%"><canvas id="myChart" width="400" height="450"></canvas></div>
第三步
在创建好canvas之后，我们需要创建一个，用于设置图表上的各个参数。
<script>//为data准备的数据var arr2=new Array(); arr2[0]="30";arr2[1]="52";arr2[2]="45";arr2[3]="78";arr2[4]="27";arr2[5]="88";arr2[6]="65";//用于存放图表上的数据var lineChartData = { //表的X轴参数labels : ["January","February","March","April","May","June","July"],datasets : [{fillColor : "transparent",//背景色，常用transparent透明strokeColor : "rgba(220,220,220,1)", //线条颜色，也可用"#ffffff"pointColor : "rgba(220,220,220,1)", //点的填充颜色pointStrokeColor : "#fff", //点的外边框颜色data : [65,59,32,29,46,55,40]//点的Y轴值},{fillColor : "transparent",strokeColor : "rgba(151,187,205,1)",pointColor : "rgba(151,187,205,1)",pointStrokeColor : "#fff",data : [] //data中的参数，通过下方for循环，获取arr2中的数据}]}for(var i = 0; i < arr2.length;i++){ lineChartData.datasets[1].data.push(arr2[i]);//将数组arr2中的值写入data}//定义图表的参数 var defaults = { scaleStartValue :null,// Y 轴的起始值scaleLineColor : "rgba(0,0,0,.1)", // Y/X轴的颜色scaleLineWidth : 1, // X,Y轴的宽度scaleShowLabels : true, // 刻度是否显示标签, 即Y轴上是否显示文字 scaleLabel : "<%=value%>", // Y轴上的刻度,即文字 scaleFontFamily : "'Arial'", // 字体 scaleFontSize : 20, // 文字大小 scaleFontStyle : "normal", // 文字样式 scaleFontColor : "#666", // 文字颜色 scaleShowGridLines : true, // 是否显示网格 scaleGridLineColor : "rgba(0,0,0,.05)", // 网格颜色scaleGridLineWidth : 2,// 网格宽度 bezierCurve : false, // 是否使用贝塞尔曲线? 即:线条是否弯曲pointDot : true, // 是否显示点数 pointDotRadius : 8,// 圆点的大小 pointDotStrokeWidth : 1,// 圆点的笔触宽度, 即:圆点外层边框大小 datasetStroke : true, // 数据集行程datasetStrokeWidth : 2,// 线条的宽度, 即:数据集datasetFill : false, // 是否填充数据集 animation : true, // 是否执行动画 animationSteps : 60,// 动画的时间 animationEasing : "easeOutQuart", // 动画的特效 onAnimationComplete : null // 动画完成时的执行函数 }window.onload = function(){var ctx = document.getElementById("myChart").getContext("2d");window.myLine = new Chart(ctx).Line(lineChartData,defaults); }</script>
当我们完成了在指定的canvas上实例化Chart对象之后，Chart.js会自动针对retina屏幕做缩放。制作一张折线图的流程就结束了,若要创建其他类型图建议去查看官网中文文档。下图为演示效果
