Chart.js輕量級(jí)圖表庫怎么用-創(chuàng)新互聯(lián)
小編給大家分享一下Chart.js輕量級(jí)圖表庫怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
技術(shù)選型
研究了Highcharts、百度的ECharts、阿里的G2和Charts.js四個(gè)圖表庫，由于項(xiàng)目對(duì)圖表需求不大，圖表不復(fù)雜，所以引入了輕量級(jí)的Charts.js。Chart.js很容易上手，只需要在頁面中引用腳本文件，并創(chuàng)建
引入
GitHUb上下載源碼，把里面的dist/Chart.bundle.js文件引入項(xiàng)目即可使用；查看源碼，發(fā)現(xiàn)其兼容了多種模塊加載方式，所以我使用requireJs在頁面中加載。
使用經(jīng)驗(yàn)
①圖表顏色值個(gè)數(shù)可以不與數(shù)據(jù)個(gè)數(shù)相等，如
var pieConfig = {
type: 'pie',
data: {
datasets: [{
data: [10, 20],
backgroundColor: ['#debd5a', '#ff6d4a', '#3cc9bf', '#7599e9',]
}]
}
}②可以取消響應(yīng)式options: {responsive: false}，方便控制圖表的大小，canvas多大圖表便多大，canvas不會(huì)自動(dòng)占滿外層容器。
③取消legend的點(diǎn)擊事件，因?yàn)辄c(diǎn)擊legend會(huì)默認(rèn)隱藏該數(shù)據(jù)的占比，所以我需要去掉點(diǎn)擊事件，設(shè)置legend: {onClick: function () {}}，修改點(diǎn)擊事件。
④把legend由默認(rèn)的矩形修改成正方形，設(shè)置legend的字體大小和色值
options: {
legend: {
position: 'right',
labels: {
boxWidth: 14,// 修改寬度
fontSize: 14,
fontColor: '#666666'
}
}效果如下
⑤柱狀圖去掉網(wǎng)格線，設(shè)置軸線顏色、矩形的寬度和y軸數(shù)據(jù)從0開始展示。由于使用的Chart.js 2.0，配置參數(shù)變化很多，所以網(wǎng)上很多列子已失效，這里給出有效的配置代碼
options: {
scales: {
xAxes: [{
gridLines: {
color: 'rgba(0, 0, 0, 0)',// 隱藏x軸方向軸線
zeroLineColor: '#666666'// 設(shè)置軸顏色
},
barPercentage: 0.2,// 設(shè)置柱寬度
ticks: {// 設(shè)置軸文字字號(hào)和色值
fontSize: 12,
fontColor: '#666666'
}
}],
yAxes: [{
gridLines: {
color: 'rgba(0, 0, 0, 0)',// 隱藏要y軸軸線
zeroLineColor: '#666666'
},
ticks: {
fontSize: 12,
beginAtZero: true,// y軸數(shù)據(jù)從0開始展示
fontColor: '#666666'
}
}]
}
}效果如下
⑥給圖表tooltips的數(shù)據(jù)加上單位，可以使用tooltips的callback函數(shù)設(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 + '個(gè)' ;
}
}
}效果如下
以上是“Chart.js輕量級(jí)圖表庫怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)頁標(biāo)題：Chart.js輕量級(jí)圖表庫怎么用-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://m.jiaotiyi.com/article/hcpos.html