提供很多圖表樣式
更多精彩
- 更多技術(shù)博客注簿，請(qǐng)移步 IT人才終生實(shí)訓(xùn)與職業(yè)進(jìn)階平臺(tái) - 實(shí)訓(xùn)在線
官方地址
使用方法
- 這一塊官網(wǎng)講的還比較清晰契吉，參見 getting-started
- 需要注意的是提供的
<canvas>需要有默認(rèn)寬高，否則會(huì)渲染報(bào)錯(cuò)
數(shù)據(jù)結(jié)構(gòu)
- ChartJs的數(shù)據(jù)類型分為 Line-線形圖 诡渴、Bar-柱狀圖 捐晶、Radar-雷達(dá)圖 、Doughnut-中空餅圖 玩徊、Pie-實(shí)心餅圖 租悄、Bubble-氣泡圖 、Scatter 恩袱、Area 泣棋、Mixed
- 類型很多，但我認(rèn)為官網(wǎng)文檔中對(duì)于每種類型的數(shù)據(jù)結(jié)構(gòu)描述實(shí)在是太糟糕了畔塔，通常需要打開控制臺(tái)查看樣例的代碼結(jié)構(gòu)才能得知
- 以下列出一些常用的數(shù)據(jù)結(jié)構(gòu)
Line-線形圖 / Bar-柱狀圖
- 線形圖和柱狀圖的數(shù)據(jù)格式基本一致
- 柱狀圖對(duì)背景色和邊框色傳入數(shù)組潭辈，可以讓每個(gè)柱狀顯示不一樣的顏色
- 線形圖如果沒(méi)有多色的需求鸯屿，對(duì)背景色和邊框可以直接傳入單值
{
"labels": ["Java 軟件開發(fā)初級(jí)", "實(shí)訓(xùn)階段性收費(fèi)稍微測(cè)試一下", "免費(fèi)的隨便找一個(gè)"],
"datasets": [{
"label": "進(jìn)度匯總",
"fill": false,
"data": [10, 30, 66],
"borderWidth": 1,
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)"],
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)"]
}]
}
Doughnut-中空餅圖 / Pie-實(shí)心餅圖
{
"datasets": [{
"data": [1, 2, 3],
"backgroundColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)"],
"label": "Dataset 1"
}],
"labels": [1, 2, 3]
}
常用屬性和方法
- 同樣的，官方文檔中對(duì)于配置屬性的講解也非常讓人頭疼把敢，通常需要什么內(nèi)容寄摆，都是去例子中查找控制臺(tái)才能找到
- 以下列舉一些常用的屬性和方法
頂層屬性配置
-
ctx 是獲取到的
<canvas>實(shí)例 -
cfg 是圖表的頂層屬性配置
- type 是圖表的類型，參照前面數(shù)據(jù)結(jié)構(gòu)中列舉的類型傳入即可修赞，注意單詞是全小寫
- data 是前面數(shù)據(jù)結(jié)構(gòu)中提到的各種類型圖表的具體數(shù)據(jù)婶恼，格式正確傳入即可
- options 才是真正控制圖表顯示樣式的具體配置，屬性非常繁雜柏副，官方描述特別混亂
let cfg = {
type: 'line',
data: data,
options: {}
}
new Chart(ctx, cfg)
顯示圖表的標(biāo)題
- 官方文檔在此處 options-title
- display 默認(rèn)值是false 勾邦，改為true才會(huì)顯示標(biāo)題
- text 標(biāo)題內(nèi)容
- position 是標(biāo)題位置，默認(rèn)值是top 割择，支持 top 眷篇、right 、bottom 荔泳、left
options: {
title: {
display: true,
text: '圖表標(biāo)題',
position: 'bottom'
}
}
對(duì)徽章的控制項(xiàng)
- 官方文檔在此處 options-legend
- 徽章其實(shí)就是圖表中用來(lái)標(biāo)注每個(gè)dataset的元素蕉饼，顯示格式為
顏色-描述 - display 默認(rèn)值是true ，改為false就可以隱藏
- position 是徽章位置玛歌，默認(rèn)值是top 昧港，支持 top 、right 沾鳄、bottom 慨飘、left
options: {
legend: {
display: true,
position: 'right'
}
}
讓Y軸的值從0開始
- 官方文檔在此處 options-scales-ticks
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
隱藏X軸標(biāo)題
- 官方文檔在此處 options-scales-ticks
options: {
scales: {
xAxes: [{
ticks: {
display: false
}
}]
}
}
更新數(shù)據(jù)內(nèi)容
- 官方文檔在此處 update-chart
var chart = new Chart(ctx, cfg)
chart.data = data
chart.update()
監(jiān)聽點(diǎn)擊事件
- 官方文檔在此處 event-click
- 同樣的，官方文檔對(duì)于事件監(jiān)聽的描述非常不詳細(xì)译荞，甚至連點(diǎn)擊事件的形參都沒(méi)有描述
- 在官方示例中暫時(shí)也沒(méi)有找到對(duì)事件監(jiān)聽的內(nèi)容
- 需要注意的事雖然點(diǎn)擊的需求一般都是點(diǎn)擊某個(gè)具體的數(shù)據(jù)值瓤的，但ChartJs的點(diǎn)擊事情監(jiān)聽是整個(gè)容器
- 如果點(diǎn)擊的是某個(gè)數(shù)據(jù)值，則會(huì)返回一個(gè)有內(nèi)容的數(shù)組吞歼，否則會(huì)返回空數(shù)組
- 返回的數(shù)據(jù)值對(duì)象本身意義也不明確圈膏，個(gè)人認(rèn)為有用的值就是索引
chart[0]._index - 之后可以通過(guò)索引到整個(gè)數(shù)據(jù)源中去找到對(duì)應(yīng)的值
- 以下代碼中的
threadChart是初始化圖表后返回的圖表對(duì)象，需要再外部指定
options: {
// 監(jiān)聽事件類型
events: ['click'],
onClick: function (e, chart) {
// 獲取點(diǎn)擊的對(duì)象
var point = chart[0]
// 點(diǎn)擊空白位置直接返回
if (point === undefined) {
return
}
// 獲取點(diǎn)擊對(duì)象的索引
var index = point._index
// 在數(shù)據(jù)源中找到對(duì)應(yīng)索引的yLabel值
var currentDate = threadChart.data.labels[index]
console.log(currentDate)
}
}
