chart. js 官方文檔中文譯本

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

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

條形圖

條形圖提供了一種顯示以垂直長(zhǎng)條表示的數(shù)據(jù)值的方式。有時(shí)用于顯示代表某一趨勢(shì)的數(shù)據(jù)，并且可同時(shí)并排比較多個(gè)數(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ù)集屬性

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

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

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

borderSkipped

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

選項(xiàng)是：
*bottom

left

top

right

配置選項(xiàng)

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

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

offsetGridLines

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

氣泡圖

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

 {
????“type”：“bubble”，
????“data”：{
????????“datasets”：[{
????????????“l(fā)abel”：“第一個(gè)數(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è)置圖形屬性配置選項(xiàng)
});

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

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

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

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

配置選項(xiàng)

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

默認(rèn)選項(xiàng)

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

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

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

Bubble Data Object

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

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

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

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

GPU云服務(wù)器云服務(wù)器 hadoop官方中文文檔 chart.js chart.js cdn chart.js 刷新數(shù)據(jù)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/82664.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

chengtao1633

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

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

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

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

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

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

chart. js 官方文檔中文譯本

相關(guān)文章