詳解Chart.js輕量級圖表庫的使用經驗
前言
最近項目中遇到一個在頁面中畫圖表的需求，需要一個扇狀圖和一個柱狀圖，雖然能使用svg或canvas繪制，但吃力還不一定討好，所以研究接入了主流的第三方圖表庫供項目使用。下面主要記錄我使用過程中的一些體驗和解決方法，具體教程請移步官方文檔。
技術選型
研究了Highcharts、百度的ECharts、阿里的G2和Charts.js四個圖表庫，由于項目對圖表需求不大，圖表不復雜，所以引入了輕量級的Charts.js。Chart.js很容易上手，只需要在頁面中引用腳本文件，并創(chuàng)建 <canvas> 節(jié)點即可渲染出圖表。且為你的數(shù)據提供 8 種可視化展現(xiàn)方式，每種方式都具有動態(tài)效果并且可定制；在所有現(xiàn)代瀏覽器（IE9+）上都有高效的繪圖效率；響應式布局。
GitHub源碼： https://github.com/nnnick/Chart.js
Chart.js文檔：http://www.bootcss.com/p/chart.js/
引入
GitHUb上下載源碼，把里面的dist/Chart.bundle.js文件引入項目即可使用；查看源碼，發(fā)現(xiàn)其兼容了多種模塊加載方式，所以我使用requireJs在頁面中加載。
使用經驗
①圖表顏色值個數(shù)可以不與數(shù)據個數(shù)相等，如
var pieConfig = {
type: 'pie',
data: {
datasets: [{
data: [10, 20],
backgroundColor: ['#debd5a', '#ff6d4a', '#3cc9bf', '#7599e9',]
}]
}
}
②可以取消響應式options: {responsive: false}，方便控制圖表的大小，canvas多大圖表便多大，canvas不會自動占滿外層容器。
③取消legend的點擊事件，因為點擊legend會默認隱藏該數(shù)據的占比，所以我需要去掉點擊事件，設置legend: {onClick: function () {}}，修改點擊事件。
④把legend由默認的矩形修改成正方形，設置legend的字體大小和色值
options: {
legend: {
position: 'right',
labels: {
boxWidth: 14,// 修改寬度
fontSize: 14,
fontColor: '#666666'
}
}
效果如下
⑤柱狀圖去掉網格線，設置軸線顏色、矩形的寬度和y軸數(shù)據從0開始展示。由于使用的Chart.js 2.0，配置參數(shù)變化很多，所以網上很多列子已失效，這里給出有效的配置代碼
options: {
scales: {
xAxes: [{
gridLines: {
color: 'rgba(0, 0, 0, 0)',// 隱藏x軸方向軸線
zeroLineColor: '#666666'// 設置軸顏色
},
barPercentage: 0.2,// 設置柱寬度
ticks: {// 設置軸文字字號和色值
fontSize: 12,
fontColor: '#666666'
}
}],
yAxes: [{
gridLines: {
color: 'rgba(0, 0, 0, 0)',// 隱藏要y軸軸線
zeroLineColor: '#666666'
},
ticks: {
fontSize: 12,
beginAtZero: true,// y軸數(shù)據從0開始展示
fontColor: '#666666'
}
}]
}
}
效果如下
⑥給圖表tooltips的數(shù)據加上單位，可以使用tooltips的callback函數(shù)設置
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '%';
var title = data.labels[tooltipItem.index] + ':';
return title + value;
}
}
}
效果如下
tooltips: {
callbacks: {
label: function (tooptipItem) {
return tooptipItem.yLabel + '個' ;
}
}
}
效果如下
總結
語言功底有限，表達不到位敬請原諒，本文主要作為自己項目總結使用。以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
- 使用Chart.js圖表庫制作漂亮的響應式表單
- Chart.js 輕量級HTML5圖表繪制工具庫（知識整理）
- 在 Angular 中使用Chart.js 和 ng2-charts的示例代碼
- 使用Vue.js 和Chart.js制作絢麗多彩的圖表
- ichart.js繪制虛線、平均分虛線效果的實現(xiàn)代碼
- Chart.js在Laravel項目中的應用示例
- vue集成chart.js的實現(xiàn)方法
- 利用ECharts.js畫K線圖的方法示例
- JavaScript Chart 插件整理
- 詳解vue文件中使用echarts.js的兩種方式
- vue.js+Echarts開發(fā)圖表放大縮小功能實例
- Chart.js功能與使用方法小結
相關文章
詳解javascript傳統(tǒng)方法實現(xiàn)異步校驗
這篇文章主要為大家介紹了javascript實現(xiàn)異步校驗的方法，感興趣的小伙伴們可以參考一下2016-01-01
在寫js的時候,很多時候都會遇到異步轉同步的問題,下面這篇文章主要給大家介紹了關于JS中如何讓異步執(zhí)行的方法同步執(zhí)行的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
在?Web?API?中，有非常有用的對象、屬性和函數(shù)可用于執(zhí)行小到訪問?DOM?這樣的小任務，大到處理音頻、視頻這樣的復雜任務。下面就帶大家一起來看看一些不常見但很實用的Web?API的用法2022-08-08
這篇文章主要分享一個Javascript隨機標簽云代碼實例,需要的朋友可以參考下。2016-06-06
這篇文章主要介紹了JS中apply()的應用,結合實例形式分析了apply()操作數(shù)組的相關使用技巧,需要的朋友可以參考下2019-06-06
今天比較系統(tǒng)都學習了 JavaScript 的事件系統(tǒng)。2010-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單圖片切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
異步在JS中是常用的,下面這篇文章主要給大家介紹了關于JS四種異步解決方案的相關資料,文中通過代碼介紹的非常詳細,對大家學習或者使用js具有一定的參考借鑒價值,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了JavaScript輸出所選擇起始與結束日期的方法,涉及javascript結合HTML5元素操作日期運算的相關實現(xiàn)技巧,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了js禁止頁面刷新與后退的方法,實例分析了javascript屏蔽F5鍵、右鍵菜單、F1鍵等實現(xiàn)技巧,需要的朋友可以參考下2015-06-06