ドキュメントのチャート。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
});

データセットのプロパティ

属性は、各データセットのためのバーの複数の仕様を可能にします。これらのプロパティは、データ表示の特定のセットを設定するために使用されています。例えば、カラーバーは、典型的には、そのように長い棒が配置されています。

一部の属性は、配列として指定することができます。値の配列へのこれらの値は、最初の値は最初の細長いバーに適用される場合、第2の値は第2の細長いバーに適用し、そしてようにされています。

名前	タイプ	説明
label	String	先端ボックスを浮動タグデータセットに表示され、伝説
xAxisID	String	ID X軸このデータセットを印刷する。指定されない場合、デフォルトは、ID FOUNDの最初のx軸であります
yAxisID	String	このデータセットIDのy軸を描画するには。指定しない場合、デフォルト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//设置图形属性配置选项
});

データセットのプロパティ

各データセットについて、図バブルは、指定された複数の属性を可能にします。表示属性は、特定のデータセットを設定するために使用されます。例えば、通常ので、気泡の色ことが配置されています。

「ラベル」を除くすべての属性を配列として指定することができます。値の配列へのこれらの値は、最初の値は、バブルパケットの最初のセットに適用される場合、第二の値を第2のバブルに印加する、というようにされています。

名前	タイプ	説明
label	String	タグは、データセットとバルーンフローティング伝説に表示されます。
backgroundColor	Color/Color[]	色のバブルを埋めます。
borderColor	Color/Color[]	概要ストローク色が泡。
borderWidth	Number / Number []	（ピクセル単位）バブルの輪郭のストローク幅。
hoverBackgroundColor	Color/Color[]	ホバリング時に背景色を泡。
hoverBorderColor	Color/Color[]	ホバリングバブル境界線の色。
hoverBorderWidth	Number / Number []	ホバーポイント境界線の幅。
hoverRadius	Number / Number []	追加データの半径にホバー半径。

設定オプション

バブルチャートは唯一の構成オプションではありません。空気の気泡が存在するすべてのオプションを設定するには、[点要素のオプション（../構成/構成要素/ point.md＃ポイントコンフィギュレーション）を使用します。

デフォルトのオプション

また、バブルチャートタイプのデフォルト値を変更することができます。そうすることで、この後に新しいデフォルト値を作成し、すべてのバブルチャートを作成します。デフォルトの設定では、バブルチャートであってもよいChart.defaults.bubble訪問。

データの構造

バブルの場合、データセットは、必要なデータポイントのセットが含まれています。各点は、[バブル・データ・オブジェクト（＃バブルデータオブジェクト）インタフェースを実装しなければなりません。

バブルデータオブジェクト

データは、バブルチャートオブジェクトの形式で送信されます。オブジェクトは、次のインタフェースを実装する必要があります。それは注意することが重要である、チャートの半径のプロパティがrあるスケーラブルではありません。これは、（ピクセル単位）オリジナルバブル半径に対応する図バブルに示されています。

{
    // X轴坐标的值
    x：<Number>，

    // Y轴坐标的值
    y：<Number>，

    //气泡的半径大小(不可缩放)。
    r：<Number>
}