chart. js 官方文檔中文譯本

chengtao1633 發(fā)布于2019-08-20 16:02 / 2226人閱讀

摘要：條形圖條形圖提供了一種顯示以垂直長條表示的數(shù)據(jù)值的方式。這些屬性用于設(shè)置特定數(shù)據(jù)集的顯示效果。這樣做將使所有創(chuàng)建的氣泡圖在此之后創(chuàng)建新的默認(rèn)值。重要的是要注意，圖表中的屬性是不可縮放的。它表示在氣泡圖上對應(yīng)的氣泡的原始半徑以像素為單位。

條形圖

條形圖提供了一種顯示以垂直長條表示的數(shù)據(jù)值的方式。有時用于顯示代表某一趨勢的數(shù)據(jù)，并且可同時并排比較多個數(shù)據(jù)集。

{
"type": "bar",
"data": {
"labels": [
"January", 
"February", 
"March", 
"April", 
"May", 
"June", 
"July"
],
"datasets": [{
"label": "My First Dataset",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(255, 159, 64, 0.2)",
"rgba(255, 205, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(201, 203, 207, 0.2)"
],
"borderColor": [
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
"rgb(75, 192, 192)",
"rgb(54, 162, 235)",
"rgb(153, 102, 255)",
"rgb(201, 203, 207)"
],
"borderWidth": 1
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
}

使用示例

var myBarChart = new Chart(ctx, {
type: "bar",
data: data,
options: options
});

數(shù)據(jù)集屬性

條形圖允許為每個數(shù)據(jù)集指定多個屬性。這些屬性用于設(shè)置特定數(shù)據(jù)集的顯示效果。例如，通常這樣設(shè)置條形圖中長條的顏色。

一些屬性可以指定為數(shù)組。如果這些值設(shè)置為數(shù)組值，則第一個值適用于條形圖中第一個長條，第二個值應(yīng)用于條形圖中第二個長條，以此類推。

名稱	類型	描述
label	String	數(shù)據(jù)集的標(biāo)簽出現(xiàn)在圖例和浮動提示框中
xAxisID	String	打印此數(shù)據(jù)集的x軸的ID.如果未指定，則默認(rèn)為第一個找到的x軸的ID
yAxisID	String	要繪制此數(shù)據(jù)集的y軸的ID.如果未指定，則默認(rèn)為首次找到的y軸的ID
backgroundColor	Color/Color[]	條形圖的填充顏色,請參閱顏色
borderColor	Color/Color[]	條形圖輪廓描邊的顏色,請參閱顏色
borderWidth	Number / Number []	條的輪廓描邊寬度（以像素為單位）
borderSkipped	String	哪個邊緣跳過繪制邊框.更多...
hoverBackgroundColor	Color/Color[]	懸停時條形圖的填充顏色
hoverBorderColor	Color/Color[]	懸停時條形圖的輪廓描邊顏色
hoverBorderWidth	Number / Number []	懸停時條形圖輪廓描邊寬度

borderSkipped

此設(shè)置用于避免在填充底部繪制條形筆觸。一般來說，除了創(chuàng)建從條形圖導(dǎo)出的圖表類型之外，不需要更改。

選項是：
*bottom

left

top

right

配置選項

條形圖定義了以下配置選項。這些選項與全局圖表配置選項Chart.defaults.global合并，以形成傳遞到圖表的選項。

名稱	類型	默認(rèn)	描述
barPercentage	Number	0.9	每個欄的可用寬度的百分比（0-1）應(yīng)在類別百分比內(nèi)。 1.0將占據(jù)整個類別的寬度，并將條形圖放在彼此旁邊。更多...
categoryPercentage	Number	0.8	用于設(shè)置條形圖中長條的每個數(shù)據(jù)點的可用寬度的百分比（0-1）（小數(shù)據(jù)集的網(wǎng)格線之間的間距）。更多...
barThickness	Number		手動設(shè)置每個欄的寬度（以像素為單位）。如果未設(shè)置，則使用barPercentage和categoryPercentage自動調(diào)整條形圖;
maxBarThickness	Number		設(shè)置此項以確保自動調(diào)整的尺寸的尺寸不會大于此厚度。僅當(dāng)barThickness未設(shè)置（啟用自動調(diào)整大小）時才起作用。
gridLines.offsetGridLines	Boolean	true	如果為true，則特定數(shù)據(jù)點的條形線落在網(wǎng)格線之間。如果為false，網(wǎng)格線將沿著條形圖的中間。更多...（

offsetGridLines

如果為true，則特定數(shù)據(jù)點的條形線落在網(wǎng)格線之間。如果為false，網(wǎng)格線將沿著條形圖的中間。這在實際開發(fā)環(huán)境中不太可能需要改變。它存在更多的方式通過配置存在重用軸代碼

氣泡圖

氣泡圖用于顯示一組三維數(shù)據(jù)。氣泡圖中氣泡的位置由前兩個維度(水平坐標(biāo) x 和垂直坐標(biāo) y )確定, 氣泡的大小由第三個維度 r 來確定。

 {
????“type”：“bubble”，
????“data”：{
????????“datasets”：[{
????????????“l(fā)abel”：“第一個數(shù)據(jù)集”，
????????????“data”：[{
????????????????“x”：20，
????????????????“y”：30，
????????????????“r”：15
????????????}，{
????????????????“x”：40，
????????????????“y”：10，
????????????????“r”：10
????????????}]，
????????????“backgroundColor”：“rgb（255，99，132）”
????????}]
????}，
}

使用示例

//氣泡圖
var myBubbleChart = new Chart(ctx,{
    type: "bubble",//設(shè)置圖形類別為氣泡圖
    data: data, //設(shè)置圖形數(shù)據(jù)
    options: options//設(shè)置圖形屬性配置選項
});

數(shù)據(jù)集屬性

氣泡圖允許為每個數(shù)據(jù)集指定多個屬性。這些用于設(shè)置特定數(shù)據(jù)集的顯示屬性。例如，通常這樣設(shè)置氣泡的顏色。

除“l(fā)abel”之外的所有屬性都可以指定為數(shù)組。如果將這些值設(shè)置為數(shù)組值，則第一個值適用于數(shù)據(jù)集中的第一個氣泡，第二個值適用于第二個氣泡，以此類推。

名稱	類型	描述
label	String	數(shù)據(jù)集的標(biāo)簽出現(xiàn)在圖例和浮動提示框中。
backgroundColor	Color/Color[]	氣泡的填充顏色。
borderColor	Color/Color[]	氣泡的輪廓描邊顏色。
borderWidth	Number / Number []	氣泡的輪廓描邊的寬度(以像素為單位)。
hoverBackgroundColor	Color/Color[]	懸停時的氣泡背景顏色。
hoverBorderColor	Color/Color[]	懸停時的氣泡邊框顏色。
hoverBorderWidth	Number / Number []	懸停時點的邊界寬度。
hoverRadius	Number / Number []	懸停時添加到數(shù)據(jù)半徑的附加半徑。

配置選項

氣泡圖沒有唯一的配置選項。要配置所有氣泡共有的選項，使用[point element options]（../ configuration / elements / point.md＃point-configuration）。

默認(rèn)選項

我們也可以更改氣泡圖類型的默認(rèn)值。這樣做將使所有創(chuàng)建的氣泡圖在此之后創(chuàng)建新的默認(rèn)值。氣泡圖的默認(rèn)配置可以在Chart.defaults.bubble中訪問。

數(shù)據(jù)結(jié)構(gòu)

對于氣泡圖，數(shù)據(jù)集需要包含一組數(shù)據(jù)點。每個點都必須實現(xiàn)[bubble data object]（＃bubble-data-object）接口。

Bubble Data Object

氣泡圖的數(shù)據(jù)以對象的形式傳遞。對象必須實現(xiàn)以下界面。重要的是要注意，圖表中的radius屬性r是不可縮放的。它表示在氣泡圖上對應(yīng)的氣泡的原始半徑（以像素為單位）。

{
????// X軸坐標(biāo)的值
????x：，

????// Y軸坐標(biāo)的值
????y：，

????//氣泡的半徑大小(不可縮放)。
????r：
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82664.html

發(fā)表評論

登陸后可評論

0條評論

chengtao1633

男|高級講師

我要關(guān)注我要私信

TA的文章

stm32通過I2C接口實現(xiàn)溫濕度（AHT20）的采集

閱讀 3022·2021-11-23 09:51
[C語言—調(diào)試技巧]

閱讀 1016·2021-09-26 09:55
ftp主機(jī)地址填什么-ftp主機(jī)地址是什么？

閱讀 3972·2021-09-22 14:58
IMX6ULL裸機(jī)學(xué)習(xí)----LED正點原子在韋東山開發(fā)板上實現(xiàn)

閱讀 1505·2021-09-08 09:35
webdock，新增兩款丹麥高配VPS，€15/月：15核/7.5G內(nèi)存/75G SSD，€30/月

閱讀 1086·2021-08-26 14:16
設(shè)計模式 -- 觀察者模式

閱讀 891·2019-08-23 18:17
解決微信返回上一頁之后，頁面不刷新

閱讀 2073·2019-08-23 16:45
JavaScript進(jìn)階之模擬new Object過程

閱讀 710·2019-08-23 15:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

chart. js 官方文檔中文譯本

相關(guān)文章