51呢最近在學習chart.js，然后呢就照着中文的幫助文檔來然后就一直出Uncaught ReferenceError : require is not defined的問題查了挺多才知道是幫助文檔跟chat.js不匹配的問題。
chart.js是分1.x和2.x版本的最新的版本是2.7.0，大家github下包的時候別下master分支包，下tags里的。然后引入的時候別引入src下的chart.js ，會報Uncaught ReferenceError : require is not defined 的錯誤。。，dist目錄才是發布目錄。。搞了半天，浪費時間。而且1.x和2.x的用法和options不一樣，這里我主要調的2.x的版本。后面應用的主要是2.x版本的chart。
中文幫主文檔呢，是1.11版本的下面是鏈接
http://www.bootcss.com/p/chart.js/docs/
對應的1.11的chart
https://github.com/chartjs/Chart.js/tags?after=v2.0.1
然后是2.x的幫助文檔
http://www.chartjs.org/docs/latest/general/interactions/events.html
然后是chart的鏈接
https://github.com/chartjs/Chart.js/tags
2.x的鏈接打開后就是上面的樣子箭頭指的就是最新版本的chart，注意一定要是紅框圈起來的，然后后面翻頁能找到1.11版本的chart
又碰到兩個問題,一個是圖表適用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"});
具體用法如下
先是chart1.11的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>chart.js 1.x</title>
<style>
</style>
</head>
<script src="js/chart.1.11.js"></script>
<body>
<!-- 展示canvas -->
<div style="width:500px;height:500px;">
<canvas id="myChart"></canvas>
</div>
<script type="text/javascript">
var radarChartData = { labels: ["PHP", "Java", "HTML", "JS", "JQuery","AngelaJS","voe"], datasets: [ { label: "", fillColor: "rgba(0,55,0,0)", strokeColor: "rgba(66,0,0,0)", pointColor: "rgba(255,0,0,0)", pointStrokeColor: "rgba(0,0,0,0)", pointHighlightFill: "rgba(0,0,0,0)", pointHighlightStroke: "rgba(0,0,0,0)", data: [15,75,35,45,55,65,75] } ] }; var options = { //Boolean - If we show the scale above the chart data
scaleOverlay : true, //Boolean - If we want to override with a hard coded scale
scaleOverride : true, //** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : 5, //Number - The value jump in the hard coded scale
scaleStepWidth : 20, // Y 軸的起始值
scaleStartValue : null, // Y/X軸的顏色
scaleLineColor : "rgba(0,0,0,.1)", // X,Y軸的寬度
scaleLineWidth : 1, // 刻度是否顯示標簽, 即Y軸上是否顯示文字
scaleShowLabels : true, // Y軸上的刻度,即文字
scaleLabel : "<%=value%>", // 字體
scaleFontFamily : "'Arial'", // 文字大小
scaleFontSize : 12, // 文字樣式
scaleFontStyle : "normal", // 文字顏色
scaleFontColor : "#666", // 是否顯示網格
scaleShowGridLines : false, // 網格顏色
scaleGridLineColor : "rgba(0,0,0,.05)", // 網格寬度
scaleGridLineWidth : 2, // 是否使用貝塞爾曲線? 即:線條是否彎曲
bezierCurve : false, // 是否顯示點數
pointDot : true, // 圓點的大小
pointDotRadius : 8, // 圓點的筆觸寬度, 即:圓點外層白色大小
pointDotStrokeWidth : 2, // 數據集行程
datasetStroke : true, // 線條的寬度, 即:數據集
datasetStrokeWidth : 2, // 是否填充數據集
datasetFill : false, // 是否執行動畫
animation : true, // 動畫的時間
animationSteps : 60, // 動畫的特效
animationEasing : "easeOutQuart" } var myLine = new Chart(document.getElementById("myChart").getContext("2d")).Radar(radarChartData, options); </script>
</body>
</html>
然后是chart2.x的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>chart.js 2.x</title>
</head>
<body>
<!-- 展示canvas -->
<div style="width:500px;height:500px;" id="radar">
<canvas id="myChart"></canvas>
</div>
<!--引入 chartjs-->
<script src="js/chart.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Chart.bundle.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 設置數據和參數
var radarChartData = { labels: ["PHP", "Java", "HTML", "JS", "JQuery","AngelaJS","voe"], datasets: [ { pointBorderColor:"#CF64A7",//描點顏色
pointBackgroundColor:"#ff",//描點背景顏色
borderColor:"#C06700",//畫線顏色
data: [95,25,35,45,55,65,75] } ] }; //設置選項
var options = { legend:false,//數據項
scale: { ticks: { beginAtZero: true, stepSize:20,//Y軸間隔
max:100,//Y軸最大值
min:0, callback:function(value) { return value + '%'; }//Y軸格式化
}, angleLines:{ display:true//雷達輻射軸
}, pointLabels:{ fontSize:13//x軸文字
}, }, animation:{ onComplete:function(){ document.getElementById("radar").innerHTML = "<img src='" + myBarChart.toBase64Image() + "' />"; } } } var ctx = document.getElementById("myChart").getContext("2d"); var myBarChart = new Chart(ctx, {type: 'radar',data: radarChartData,options:options}); </script>
</body>
</html>
上面的是雷達的圖表，下面的是線型的
然后是圓形的
然后是柱狀圖
有前面的雷達作為例子后面的就好說了，把下面的類型改一改就可以
只要把圈起來的改為line或者polarArea或者scatter就能夠出對應的圖表。其實chart.js還是挺簡單的。
主要還是要注意到chart.js是否與幫助文檔匹配的問題。