1、這是個人的mark檔,逼迫自己以后寫這樣的博客,所以不是分享
2、chartjs是一個圖表控件集合,使用html5的canvas進行繪制。
注意:新手請先直接進入官網:http://www.chartjs.org/(一定是要這個,如果是其他的可能會入坑,因為版本問題)
然后進入Documentation
或者,運行以下代碼,調用的是cdn js.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試Pie餅狀圖型</title> <script src="//cdn.bootcss.com/Chart.js/2.1.6/Chart.bundle.js"></script> <style> </style> </head> <body> <!-- 展示canvas --> <div style="width: 500px;"> <canvas id="myChart" style="width:400px; height:800px;" ></canvas> </div> <!--引入 chartjs--> <script type="text/javascript"> // 設置參數 var data = { labels: [ "Red", "Blue", "Yellow" ], datasets: [ { data: [300, 50, 100], backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ], hoverBackgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ] }] }; // Get the context of the canvas element we want to select var ctx = document.getElementById("myChart").getContext("2d"); var myBarChart = new Chart(ctx, { type: 'pie', data: data, // options: options }); </script> </body> </html>
其顯示結果為:
這里我先是進入的 http://chartjs.cn [一個chartjs中文網]
可以看下他的調用代碼 :
var myNewChart = new Chart(ctx).PolarArea(data);
在chorme里根本就調用不了這個方法,而且會報錯誤:可能是版本比較老的調用方式,
而官網的調用方式提供兩種:
這里有關鍵字similar to the v1.0 syntax意思是1.0之前的語法和現在不一樣,
現在只支持new Chart(ctx,opt) 或者 new Chart.chartType(ctx,opt)(最好不用).
好了。
當然,如果是使用1.x的用戶可以去這里看文檔:
https://github.com/chartjs/Chart.js/blob/v1.1.1/docs/00-Getting-Started.md
但是,話說回來 ,都用2.x了還管什么1.x呢,當然,如果要維護前輩的代碼,還是要看下的
呵呵(輕快的~)