Chart.js - にほんご。

Configuration

更新日: 2019-12-06

チャートの動作を変更するために設定します。 スタイルや、フォント、凡例等を設定するプロパティがあります。

グローバルオプション

"グローバルオプションは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ドキュメントを翻訳/改変したものです。