Configuration
チャートの動作を変更するために設定します。 スタイルや、フォント、凡例等を設定するプロパティがあります。
グローバルオプション
"グローバルオプションはDRYを維持する"というコンセプトはChart.js 1.0で導入されました。 グローバルな設定を許容することで、 インスタンス毎にオプションを指定する必要が無くなり、 特定のチャートだけがデフォルト値に設定されてしまうことを防ぎます。
Chart.jsは、チャートに渡されたoption
オブジェクトを、 チャートタイプ別に指定されたデフォルト値を持ったグローバルオプションにマージします。 こうすることで、チャートごとに個別に設定することができ、グローバルオプションが適用可能な場合には、 全てのチャートのデフォルト値を変更することができます。 グローバルオプションはChart.defaults.global
で定義されています。 チャートタイプ毎のデフォルト値は、各チャートタイプのページで説明しています。
以下の例では、デフォルト値のままの全てのチャートと、 コンストラクタでhoverモードが渡されなかったhoverモードにnearest
を指定しています。
Chart.defaults.global.hover.mode = 'nearest';
// 上書きされていないので、hoverモードは'nearest'です。
var chartHoverModeNearest = new Chart(ctx, {
type: 'line',
data: data,
});
// このチャートはhoverモードが渡されています。
var chartDifferentHoverMode = new Chart(ctx, {
type: 'line',
data: data,
options: {
hover: {
// グローバルオプションを上書きしています。
mode: 'index'
}
}
})
デモ
アイテムにマウスカーソルを当てると、該当データが強調されます。
少し分かりづらいですが、上のチャートではAとBの両方が強調されます。 下のチャートはカーソルを合わせたデータセットの全てアイテムが強調されます。
'nearest'
'dataset'
JavaScript
Chart.defaults.global.hover.mode = 'nearest';
// 上書きされていないので、hoverモードは'nearest'です。
var ctx = document.getElementById("myChart1").getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets:[{
type: 'line',
label: "A",
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgb(54, 162, 235)",
borderWidth: 1
},
{
type: 'line',
label: "B",
data: [55, 59, 70, 91, 26, 25, 70],
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgb(255, 99, 132)",
borderWidth: 1
}]
},
});
// このチャートはhoverモードが渡されています。
var ctx = document.getElementById("myChart2").getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets:[{
type: 'line',
label: "A",
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgb(54, 162, 235)",
borderWidth: 1
},
{
type: 'line',
label: "B",
data: [55, 59, 70, 91, 26, 25, 70],
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgb(255, 99, 132)",
borderWidth: 1
}]
},
options: {
hover: {
// グローバル設定を上書きしています。
mode: 'dataset',
}
}
})
HTML
<h5>'nearest'</h5>
<canvas id="myChart1"></canvas>
<br>
<h5>'dataset'</h5>
<canvas id="myChart2"></canvas>
データセットオプション
オプションはデータセットで直接指定することができます。 データセットオプションは3つのレベルで変更可能で、以下の優先度で評価されます。
- データセット毎 :
dataset.*
- チャート毎 :
options.datasets[type].*
- グローバル :
Chart.defaults.global.datasets[type].*
type
はデータセットのtypeに対応します。
注意:データセットオプションは要素オプションよりも優先されます。
以下の例ではチャート作成時にデータセットに渡されたオプションで上書きされたものを除き、 すべてのlineデータセットのshowLine
オプションをfalse
に設定します。
JavaScript
// デフォルトですべてのデータセットの線を非表示にします
Chart.defaults.global.datasets.line.showLine = false;
// このチャートでは3番目のデータセットのみ線が表示されます
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [0, 0],
}, {
data: [0, 1]
}, {
data: [1, 0],
showLine: true // 'line'データセットのデフォルト値を上書き
}, {
type: 'scatter', // このデータセットは'scatter'のため'line'データセットのデフォルト値に影響されません
data: [1, 1]
}]
}
});
© 2013 Chart.js is available under the MIT license
このコンテンツはChart.jsドキュメントを翻訳/改変したものです。