#色
チャートは 3 つの色のオプションをサポートしています。
- 幾何学的要素の場合は、変更できますバックグラウンドと国境色;
- テキスト要素の場合は、フォント色。
また、全体を変更することもできますキャンバスの背景。
#デフォルトの色
色が指定されていない場合は、グローバルなデフォルトの色が使用されます。Chart.defaults使用されている：
| 名前 | タイプ | 説明 | デフォルト値 |
|---|---|---|---|
backgroundColor | Color | 背景色 | rgba(0, 0, 0, 0.1) |
borderColor | Color | ボーダの色 | rgba(0, 0, 0, 0.1) |
color | Color | 文字の色 | #666 |
これらのプロパティを更新することで、デフォルトの色をリセットできます。Chart.defaults:
Chart.defaults.backgroundColor = '#9BD0F5';
Chart.defaults.borderColor = '#36A2EB';
Chart.defaults.color = '#000';
#データセットごとの色の設定
グラフに複数のデータセットがある場合、デフォルトの色を使用すると、個々のデータセットが区別できなくなります。その場合に設定できるのは、backgroundColorとborderColorデータセットごとに:
const data = {
labels: ['A', 'B', 'C'],
datasets: [
{
label: 'Dataset 1',
data: [1, 2, 3],
borderColor: '#36A2EB',
backgroundColor: '#9BD0F5',
},
{
label: 'Dataset 2',
data: [2, 3, 4],
borderColor: '#FF6384',
backgroundColor: '#FFB1C1',
}
]
};
ただし、データセットごとに色を設定するには、やりたくない追加作業が必要になる場合があります。その場合は、事前定義または生成されたパレットで次のプラグインを使用することを検討してください。
#デフォルトのカラーパレット
色にこだわりがない場合は、組み込みのColorsプラグイン。 7 つの Chart.js ブランド カラーのパレットを循環します。
必要なのは、プラグインをインポートして登録することだけです。
import { Colors } from 'chart.js';
Chart.register(Colors);
ノート
UMD バージョンの Chart.js を使用している場合、このプラグインはデフォルトで有効になります。設定することで無効にできますenabledというオプションfalse:
const options = {
plugins: {
colors: {
enabled: false
}
}
};
#実行時の動的データセット
デフォルトでは、色プラグインは、境界線または背景の色を指定せずにチャートを初期化した場合にのみ機能します。
たとえば、実行時に動的データセットを使用する場合など、カラー プラグインで常にデータセットに色を付けるようにしたい場合は、forceOverrideオプションを true に設定します:
const options = {
plugins: {
colors: {
forceOverride: true
}
}
};
#高度なカラーパレット
を参照してください。素晴らしいリスト (新しいウィンドウが開きます)カラーパレットをより柔軟に定義できるプラグインの場合。
#カラーフォーマット
次のいずれかの表記法で色を文字列として指定できます。
| 表記 | 例 | 透明度のある例 |
|---|---|---|
| 16進数 (新しいウィンドウが開きます) | #36A2EB | #36A2EB80 |
| RGB (新しいウィンドウが開きます)またRGBA (新しいウィンドウが開きます) | rgb(54, 162, 235) | rgba(54, 162, 235, 0.5) |
| HSL (新しいウィンドウが開きます)またHSLA (新しいウィンドウが開きます) | hsl(204, 82%, 57%) | hsla(204, 82%, 57%, 0.5) |
あるいは、キャンバスパターン (新しいウィンドウが開きます)またキャンバスグラデーション (新しいウィンドウが開きます)文字列の色の代わりにオブジェクトを使用して、いくつかの興味深い効果を実現します。
#パターンとグラデーション
たとえば、データセットを画像のパターンで埋めることができます。
const img = new Image();
img.src = 'https://example.com/my_image.png';
img.onload = () => {
const ctx = document.getElementById('canvas').getContext('2d');
const fillPattern = ctx.createPattern(img, 'repeat');
const chart = new Chart(ctx, {
data: {
labels: ['Item 1', 'Item 2', 'Item 3'],
datasets: [{
data: [10, 20, 30],
backgroundColor: fillPattern
}]
}
});
};
パターン塗りつぶしは、視覚障害のある視聴者 (色覚異常や部分視力など) を助けることができます。データをより簡単に理解する (新しいウィンドウが開きます)。
使用できますパターン異常 (新しいウィンドウが開きます)データセットを満たすパターンを生成するライブラリ:
const chartData = {
datasets: [{
data: [45, 25, 20, 10],
backgroundColor: [
pattern.draw('square', '#ff6384'),
pattern.draw('circle', '#36a2eb'),
pattern.draw('diamond', '#cc65fe'),
pattern.draw('triangle', '#ffce56')
]
}],
labels: ['Red', 'Blue', 'Purple', 'Yellow']
};