小編給大家分享一下Chart.js輕量級(jí)圖表庫(kù)怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設(shè)，為客戶提供網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)服務(wù)，多年建網(wǎng)站服務(wù)經(jīng)驗(yàn)，各類網(wǎng)站都可以開(kāi)發(fā)，品牌網(wǎng)站設(shè)計(jì)，公司官網(wǎng)，公司展示網(wǎng)站，網(wǎng)站設(shè)計(jì)，建網(wǎng)站費(fèi)用，建網(wǎng)站多少錢，價(jià)格優(yōu)惠，收費(fèi)合理。
技術(shù)選型
研究了Highcharts、百度的ECharts、阿里的G2和Charts.js四個(gè)圖表庫(kù)，由于項(xiàng)目對(duì)圖表需求不大，圖表不復(fù)雜，所以引入了輕量級(jí)的Charts.js。Chart.js很容易上手，只需要在頁(yè)面中引用腳本文件，并創(chuàng)建
引入
GitHUb上下載源碼，把里面的dist/Chart.bundle.js文件引入項(xiàng)目即可使用；查看源碼，發(fā)現(xiàn)其兼容了多種模塊加載方式，所以我使用requireJs在頁(yè)面中加載。
使用經(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開(kāi)始展示。由于使用的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開(kāi)始展示
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í)圖表庫(kù)怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
