chart.js使用

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>