#構成
この構成は、チャートの動作を変更するために使用されます。スタイル、フォント、凡例などを制御するプロパティがあります。
#構成オブジェクトの構造
Chart.js 構成の最上位構造:
const config = {
type: 'line'
data: {}
options: {}
plugins: []
}
#タイプ
グラフの種類によって、グラフの主な種類が決まります。
ノートデータセットは、type、これが混合チャートの構築方法です。
#データ
見るデータ構造詳細については。
#オプション
ドキュメントの大部分はこれらのオプションについて説明しています。
#プラグイン
インライン プラグインをこの配列に含めることができます。これは、単一のチャートにプラグインを追加する別の方法です (プラグインをグローバルに登録するのではなく)。 プラグインの詳細については、開発者セクション。
#グローバル構成
この概念は、構成を維持するために Chart.js 1.0 で導入されました。ドライ (新しいウィンドウが開きます)、グラフの種類全体でオプションをグローバルに変更できるため、インスタンスごとにオプションを指定したり、特定のグラフの種類のデフォルトを指定したりする必要がなくなります。
Chart.js は、チャート タイプのデフォルトを使用して、チャートに渡されたオプション オブジェクトをグローバル設定とマージし、デフォルトを適切にスケールします。こうすることで、該当するすべてのチャート タイプのデフォルトを変更しながら、個々のチャート構成を必要に応じて具体的にすることができます。グローバルな一般オプションは次のように定義されています。Chart.defaults。各グラフ タイプのデフォルトについては、そのグラフ タイプのドキュメントで説明されています。
次の例では、チャート タイプのデフォルトまたは作成時にコンストラクターに渡されるオプションによってオーバーライドされなかったすべてのチャートに対して、インタラクション モードを「最も近い」に設定します。
Chart.defaults.interaction.mode = 'nearest';
// Interaction mode is set to nearest because it was not overridden here
const chartInteractionModeNearest = new Chart(ctx, {
type: 'line',
data: data
});
// This chart would have the interaction mode that was passed in
const chartDifferentInteractionMode = new Chart(ctx, {
type: 'line',
data: data,
options: {
interaction: {
// Overrides the global setting
mode: 'index'
}
}
});
#データセットの構成
オプションはデータセット上で直接構成できます。データセット オプションは、複数の異なるレベルで変更できます。見るオプションオプションがどのように解決されるかについて詳しくは、こちらをご覧ください。
次の例では、showLine作成時にデータセットに渡されるオプションによってオーバーライドされるものを除く、すべてのライン データセットのオプションを「false」に設定します。
// Do not show lines for all datasets by default
Chart.defaults.datasets.line.showLine = false;
// This chart would show a line only for the third dataset
const chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [0, 0],
}, {
data: [0, 1]
}, {
data: [1, 0],
showLine: true // overrides the `line` dataset default
}, {
type: 'scatter', // 'line' dataset default does not affect this dataset since it's a 'scatter'
data: [1, 1]
}]
}
});