摘要:條形圖條形圖提供了一種顯示以垂直長條表示的數據值的方式。這些屬性用于設置特定數據集的顯示效果。這樣做將使所有創建的氣泡圖在此之后創建新的默認值。重要的是要注意,圖表中的屬性是不可縮放的。它表示在氣泡圖上對應的氣泡的原始半徑以像素為單位。
條形圖
條形圖提供了一種顯示以垂直長條表示的數據值的方式。有時用于顯示代表某一趨勢的數據,并且可同時并排比較多個數據集。
{ "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 });數據集屬性
條形圖允許為每個數據集指定多個屬性。這些屬性用于設置特定數據集的顯示效果。例如,通常這樣設置條形圖中長條的顏色。
一些屬性可以指定為數組。如果這些值設置為數組值,則第一個值適用于條形圖中第一個長條,第二個值應用于條形圖中第二個長條,以此類推。
名稱 | 類型 | 描述 |
---|---|---|
label | String | 數據集的標簽出現在圖例和浮動提示框中 |
xAxisID | String | 打印此數據集的x軸的ID.如果未指定,則默認為第一個找到的x軸的ID |
yAxisID | String | 要繪制此數據集的y軸的ID.如果未指定,則默認為首次找到的y軸的ID |
backgroundColor | Color/Color[] | 條形圖的填充顏色,請參閱顏色 |
borderColor | Color/Color[] | 條形圖輪廓描邊的顏色,請參閱顏色 |
borderWidth | Number / Number [] | 條的輪廓描邊寬度(以像素為單位) |
borderSkipped | String | 哪個邊緣跳過繪制邊框.更多... |
hoverBackgroundColor | Color/Color[] | 懸停時條形圖的填充顏色 |
hoverBorderColor | Color/Color[] | 懸停時條形圖的輪廓描邊顏色 |
hoverBorderWidth | Number / Number [] | 懸停時條形圖輪廓描邊寬度 |
此設置用于避免在填充底部繪制條形筆觸。一般來說,除了創建從條形圖導出的圖表類型之外,不需要更改。
選項是:
*bottom
left
top
right
配置選項條形圖定義了以下配置選項。這些選項與全局圖表配置選項Chart.defaults.global合并,以形成傳遞到圖表的選項。
名稱 | 類型 | 默認 | 描述 |
---|---|---|---|
barPercentage | Number | 0.9 | 每個欄的可用寬度的百分比(0-1)應在類別百分比內。 1.0將占據整個類別的寬度,并將條形圖放在彼此旁邊。 更多... |
categoryPercentage | Number | 0.8 | 用于設置條形圖中長條的每個數據點的可用寬度的百分比(0-1)(小數據集的網格線之間的間距)。 更多... |
barThickness | Number | 手動設置每個欄的寬度(以像素為單位)。如果未設置,則使用barPercentage和categoryPercentage自動調整條形圖; | |
maxBarThickness | Number | 設置此項以確保自動調整的尺寸的尺寸不會大于此厚度。僅當barThickness未設置(啟用自動調整大小)時才起作用。 | |
gridLines.offsetGridLines | Boolean | true | 如果為true,則特定數據點的條形線落在網格線之間。如果為false,網格線將沿著條形圖的中間。 更多...( |
如果為true,則特定數據點的條形線落在網格線之間。如果為false,網格線將沿著條形圖的中間。這在實際開發環境中不太可能需要改變。它存在更多的方式通過配置存在重用軸代碼
氣泡圖氣泡圖用于顯示一組三維數據。氣泡圖中氣泡的位置由前兩個維度(水平坐標 x 和垂直坐標 y )確定, 氣泡的大小由第三個維度 r 來確定。
{ ????“type”:“bubble”, ????“data”:{ ????????“datasets”:[{ ????????????“label”:“第一個數據集”, ????????????“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",//設置圖形類別為氣泡圖 data: data, //設置圖形數據 options: options//設置圖形屬性配置選項 });數據集屬性
氣泡圖允許為每個數據集指定多個屬性。這些用于設置特定數據集的顯示屬性。例如,通常這樣設置氣泡的顏色。
除“label”之外的所有屬性都可以指定為數組。如果將這些值設置為數組值,則第一個值適用于數據集中的第一個氣泡,第二個值適用于第二個氣泡,以此類推。
名稱 | 類型 | 描述 |
---|---|---|
label | String | 數據集的標簽出現在圖例和浮動提示框中。 |
backgroundColor | Color/Color[] | 氣泡的填充顏色。 |
borderColor | Color/Color[] | 氣泡的輪廓描邊顏色。 |
borderWidth | Number / Number [] | 氣泡的輪廓描邊的寬度(以像素為單位)。 |
hoverBackgroundColor | Color/Color[] | 懸停時的氣泡背景顏色。 |
hoverBorderColor | Color/Color[] | 懸停時的氣泡邊框顏色。 |
hoverBorderWidth | Number / Number [] | 懸停時點的邊界寬度。 |
hoverRadius | Number / Number [] | 懸停時添加到數據半徑的附加半徑。 |
氣泡圖沒有唯一的配置選項。要配置所有氣泡共有的選項,使用[point element options](../ configuration / elements / point.md#point-configuration)。
默認選項我們也可以更改氣泡圖類型的默認值。這樣做將使所有創建的氣泡圖在此之后創建新的默認值。氣泡圖的默認配置可以在Chart.defaults.bubble中訪問。
數據結構對于氣泡圖,數據集需要包含一組數據點。每個點都必須實現[bubble data object](#bubble-data-object)接口。
Bubble Data Object氣泡圖的數據以對象的形式傳遞。對象必須實現以下界面。重要的是要注意,圖表中的radius屬性r是不可縮放的。它表示在氣泡圖上對應的氣泡的原始半徑(以像素為單位)。
{ ????// X軸坐標的值 ????x:, ????// Y軸坐標的值 ????y: , ????//氣泡的半徑大小(不可縮放)。 ????r: }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50706.html
摘要:條形圖條形圖提供了一種顯示以垂直長條表示的數據值的方式。這些屬性用于設置特定數據集的顯示效果。這樣做將使所有創建的氣泡圖在此之后創建新的默認值。重要的是要注意,圖表中的屬性是不可縮放的。它表示在氣泡圖上對應的氣泡的原始半徑以像素為單位。 條形圖 條形圖提供了一種顯示以垂直長條表示的數據值的方式。有時用于顯示代表某一趨勢的數據,并且可同時并排比較多個數據集。 { type: bar, d...
摘要:前后經過九個月,我翻譯的官方版本中文文檔可以發布第一個較為完整的版本了。這點原本是最重要的,但讓位于符合中文習慣,是因為如果譯本有機翻痕跡,給人的品質感和可信度就降低了更準確和更優雅的翻譯風格。 showImg(/img/remote/1460000006773992); 前后經過九個月,我翻譯的Spring MVC官方4.2.4版本中文文檔可以發布第一個較為完整的版本了。譯文上盡量做...
摘要:概要什么是實戰整合實現負載均衡是什么是一個客戶端負載均衡的組件什么是負載均衡負載均衡就是分發請求流量到不同的服務器目前的實現有軟件和硬件負載均衡分為兩種服務器端負載均衡如上圖所示服務器端負載均衡是對客戶透明的用戶請求到服務器真正的服務器是由 概要 什么是Spring Cloud Netflix Ribbon? 實戰:整合Ribbon實現負載均衡 Spring Cloud Netfl...
摘要:使用小結官方文檔英文文檔中文文檔在中的使用開始使用在相應的頁面中引入先寫一個小的作圖動態更新的數據作圖更新數據 Chart.js使用小結 官方文檔 英文文檔 https://www.chartjs.org/docs/...中文文檔 https://chartjs-doc.abingoal.com 在react中的使用 開始使用 npm install chart.js --save ...
閱讀 1166·2021-11-22 15:22
閱讀 3837·2021-10-19 13:13
閱讀 3570·2021-10-08 10:05
閱讀 3292·2021-09-26 10:20
閱讀 2984·2019-08-29 14:21
閱讀 2192·2019-08-27 10:55
閱讀 1871·2019-08-26 10:31
閱讀 2578·2019-08-23 16:47