Bootstrap是由前Twitter設計師Mark Otto和Jacob Thornton開發的前端工具包,其提供了優雅的HTML和CSS規范。Bootstrap不單單是一個框架,更確切的說,它改變了整個游戲規則。該框架使得許多應用和網站的設計開發變得簡便許多,而且它將大量的HTML框架普及成了產品。
圖表組件Chart.js是Bootstrap比較好用的組件之一,與一款收費的組件highchart類似,效果上來看免費與收費的產品相差還是有一點點的,不過功能上差不多能滿足我們項目的需要。下面這段JS腳本主要是為了方便生成一個圖表的配置而寫的方法
/** * 獲取一個新的chart配置項 * @param color rgba顏色 * @param type 圖表類型:line,bar,radar,polarArea,pie,doughnut * @param title 顯示圖表的標題 * @param label 圖表的標簽,鼠標移到圖表某個數據點時顯示的提示文字 * @param categories 一般是X軸的內容 * @param data 一般是Y軸的數據 * @returns 返回圖表的配置參數 */ function getNewConfig(color,type,title,label,categories,data) { var background = color; var config = { type: type, options: { responsive: true, legend: { display: false, position:'bottom' }, hover: { mode: 'label' }, scales: { xAxes: [{ display: true, scaleLabel: { display: false, labelString: 'Month' } }], yAxes: [{ display: true, scaleLabel: { display: false, labelString: 'Value' } }] }, title: { display: true, text: title } } }; var dataset = { label: label, data: data, fill: false, borderDash: [, ], borderColor : background, backgroundColor : background, pointBorderColor : background, pointBackgroundColor : background, pointBorderWidth : }; var data = { labels:categories, datasets: [dataset] }; config.data = data; return config; }
調用方法:
<canvas id="chart_weixinmember" height=""></canvas> var color = 'rgba(,,,.)'; var categories = ["--","--","--","--","--","--","--"]; var data = [,,,,,,]; var config = getNewConfig(color,'line','最近天微信會員增長情況','當天新增微信會員',categories,data); var ctx = document.getElementById("chart_weixinmember").getContext("d"); var weixinMemberCountChart = new Chart(ctx, config);
顯示的效果:
說明:使用上面的代碼需要引用Chart.js,
Chart中文網站以及文檔:
http://www.bootcss.com/p/chart.js/
http://www.bootcss.com/p/chart.js/docs/
Chart英文網站及文檔:
www.chartjs.org
www.chartjs.org/docs