chart. js 官方文檔中文譯本

條形圖

條形圖提供了一種顯示以垂直長條表示的數據值的方式。有時用於顯示錶明某一趨勢的數據，而且可同時並排比較多個數據集。

{
"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 []	懸停時條形圖輪廓描邊寬度

borderSkipped

此設置用於避免在填充底部繪製條形筆觸。通常來講，除了建立從條形圖導出的圖表類型以外，不須要更改。

選項是：
*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，網格線將沿着條形圖的中間。 更多...（

offsetGridLines

若是爲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：<Number>，

    // Y軸座標的值
    y：<Number>，

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