chart.js是一个生成图表的js插件,
因为项目中有生成图表的需求，看了下百度的echarts和chart.js，echarts很好用，文档比较全blog也不少，还是中文，不过在生成图表用wkhhtmltopdf转PDF的时候有兼容的问题，所以看了下chart.js
chart.js是分1.x和2.x版本的最新的版本是2.5.0，大家github下包的时候别下master分支包，下tags里的。然后引入的时候别引入src下的chart.js :)，会报Uncaught ReferenceError : require is not defined 的错误。。，dist目录才是发布目录。。搞了半天，浪费时间。而且1.x和2.x的用法和options不一样，这里我主要调的2.x的版本
1.x的docs链接http://www.bootcss.com/p/chart.js/docs/
2.x的docs链接http://www.chartjs.org/docs/#scales-category-scale
两个文档都是英文的1.x的注释是网上copy来的，2.x的几个option自己加的，这块中文资料比较少，还加了转图片的代码，貌似图表的大小是由canvas外的div决定的。
又碰到两个问题,一个是图表适用retina屏的设置如下
var myChart = echarts.init(document.getElementById('radar'),{
devicePixelRatio: 5 //devicePixelRatio是指设备的像素比，简单来说就是设备物理像素和独立像素的比例，应该是比例越高图像越清晰
});
不过这个设置用在PDF里还是不能高清显示，换了一种方式将图表转换成高分辨率的图片放到PDF里，问题解决了
var img = new Image();
img.src = myChart.getDataURL({
pixelRatio: 5,//图片像素比
backgroundColor: '#fff'
});
$("#radar").html("").prepend(img);
$("#radar img").css({"width":"414px","height":"300px"});
具体用法如下
1.x
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>chart.js 1.x</title> 6 <style> 7 8 </style> 9 10 </head> 11 <script src="Chart.js-1.1.1/Chart.js"></script> 12 <body> 13 14 <!-- 展示canvas --> 15 <div style="500px;height:500px;"> 16 <canvas id="myChart"></canvas> 17 </div> 18 <script type="text/javascript"> 19 var radarChartData = { 20 labels: ["星期一", "星期二", "星期三", "星期四", "星期五","星期六","星期日"], 21 datasets: [ 22 { 23 label: "", 24 fillColor: "rgba(0,0,0,0)", 25 strokeColor: "rgba(0,0,0,0)", 26 pointColor: "rgba(0,0,0,0)", 27 pointStrokeColor: "rgba(0,0,0,0)", 28 pointHighlightFill: "rgba(0,0,0,0)", 29 pointHighlightStroke: "rgba(0,0,0,0)", 30 data: [15,25,35,45,55,65,75] 31 } 32 ] 33 }; 34 var options = { 35 36 //Boolean - If we show the scale above the chart data 37 scaleOverlay : true, 38 39 //Boolean - If we want to override with a hard coded scale 40 scaleOverride : true, 41 42 //** Required if scaleOverride is true ** 43 //Number - The number of steps in a hard coded scale 44 scaleSteps : 5, 45 46 //Number - The value jump in the hard coded scale 47 scaleStepWidth : 20, 48 49 // Y 轴的起始值 50 scaleStartValue : null, 51 52 // Y/X轴的颜色 53 scaleLineColor : "rgba(0,0,0,.1)", 54 55 // X,Y轴的宽度 56 scaleLineWidth : 1, 57 58 // 刻度是否显示标签, 即Y轴上是否显示文字 59 scaleShowLabels : true, 60 61 // Y轴上的刻度,即文字 62 scaleLabel : "<%=value%>", 63 64 // 字体 65 scaleFontFamily : "'Arial'", 66 67 // 文字大小 68 scaleFontSize : 12, 69 70 // 文字样式 71 scaleFontStyle : "normal", 72 73 // 文字颜色 74 scaleFontColor : "#666", 75 76 // 是否显示网格 77 scaleShowGridLines : false, 78 79 // 网格颜色 80 scaleGridLineColor : "rgba(0,0,0,.05)", 81 82 // 网格宽度 83 scaleGridLineWidth : 2, 84 85 // 是否使用贝塞尔曲线? 即:线条是否弯曲 86 bezierCurve : false, 87 88 // 是否显示点数 89 pointDot : true, 90 91 // 圆点的大小 92 pointDotRadius : 8, 93 94 // 圆点的笔触宽度, 即:圆点外层白色大小 95 pointDotStrokeWidth : 2, 96 97 // 数据集行程 98 datasetStroke : true, 99 100 // 线条的宽度, 即:数据集 101 datasetStrokeWidth : 2, 102 103 // 是否填充数据集 104 datasetFill : false, 105 106 // 是否执行动画 107 animation : true, 108 109 // 动画的时间 110 animationSteps : 60, 111 112 // 动画的特效 113 animationEasing : "easeOutQuart" 114 } 115 var myLine = new Chart(document.getElementById("myChart").getContext("2d")).Radar(radarChartData, options); 116 </script> 117 </body> 118 </html>
2.x
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>chart.js 2.x</title> 6 </head> 7 <body> 8 <!-- 展示canvas --> 9 <div style="500px;height:500px;" id="radar"> 10 <canvas id="myChart"></canvas> 11 </div> 12 <!--引入 chartjs--> 13 <script src="Chart.js-2.4.0/dist/Chart.bundle.min.js"></script> 14 15 16 <script type="text/javascript"> 17 // 设置数据和参数 18 var radarChartData = { 19 labels: ["星期一", "星期二", "星期三", "星期四", "星期五","星期六","星期日"], 20 datasets: [ 21 { 22 pointBorderColor:"#C064A7",//描点颜色 23 pointBackgroundColor:"#fff",//描点背景颜色 24 borderColor:"#C064A7",//画线颜色 25 data: [15,25,35,45,55,65,75] 26 } 27 ] 28 29 }; 30 //设置选项 31 var options = { 32 legend:false,//数据项 33 scale: { 34 ticks: { 35 beginAtZero: true, 36 stepSize:20,//Y轴间隔 37 max:100,//Y轴最大值 38 min:0, 39 callback:function(value) { return value + '%'; }//Y轴格式化 40 }, 41 angleLines:{ 42 display:false//雷达辐射轴 43 }, 44 pointLabels:{ 45 fontSize:13//x轴文字 46 }, 47 48 }, 49 animation:{ 50 onComplete:function(){ 51 document.getElementById("radar").innerHTML = "<img src='" + myBarChart.toBase64Image() + "' />"; 52 } 53 } 54 } 55 var ctx = document.getElementById("myChart").getContext("2d"); 56 var myBarChart = new Chart(ctx, {type: 'radar',data: radarChartData,options:options}); 57 </script> 58 </body> 59 </html>