面グラフ
線グラフとレーダーチャートの両方のグラフは、データセットオブジェクトの fillオプションをサポートしています。これは、2つのデータセットの間、またはデータセットと境界の間に面(塗りつぶし領域)を作成するために使用できます。 境界には、originまたは、start、endを指定できます。（塗りつぶしモードを参照してください）。
注:この機能は
fillerプラグインによって実装されています。
塗りつぶしモード
| モード | 型 | 値 |
|---|---|---|
| データセット番号の絶対値 1 | Number |
1, 2, 3, ... |
| データセット番号の相対値 1 | String |
'-1', '-2', '+1', ... |
| 境界 2 | String |
'start'(グラフの下端), 'end'(グラフの上端), 'origin'(y = 0) |
| 無効 3 | Boolean |
false |
1 データセットの埋め込みモードがバージョン2.6.0で導入されました
2 バージョン2.6.0より前では、境界値は'zero','top','bottom'です(非推奨)。
3 下位互換性のためfill: true(初期値)はfill: 'origin'と同値です。
例
new Chart(ctx, {
data: {
datasets: [
{fill: 'origin'}, // 0: 'origin'まで塗る
{fill: '+2'}, // 1: データセット3まで塗る
{fill: 1}, // 2: データセット1まで塗る
{fill: false}, // 3: 塗らない
{fill: '-2'} // 4: データセット2まで塗る
]
}
})
設定
| オプション | 型 | 初期値 | 説明 |
|---|---|---|---|
plugins.filler.propagate |
Boolean |
true |
ターゲットが非表示のとき広がって塗る。 |
propagate
Boolean (初期値: true)
trueの場合、非表示のデータセットのfill値によって定義された値まで、塗りつぶし領域が再帰的に拡張されます。
例
new Chart(ctx, {
data: {
datasets: [
{fill: 'origin'}, // 0: 'origin'まで塗る
{fill: '-1'}, // 1: データセット0まで塗る
{fill: 1}, // 2: データセット1まで塗る
{fill: false}, // 3: 塗らない
{fill: '-2'} // 4: データセット2まで塗る
]
},
options: {
plugins: {
filler: {
propagate: true
}
}
}
})
propagate: trueの場合
- データセット2が非表示の場合、データセット4はデータセット1まで塗られます。
- データセット2と1が非表示の場合、データセット4は'origin'まで塗られます。
propagate: falseの場合
- データセット2および/または、4が非表示の場合、データセット4は塗られません。