Chart.js - にほんご。

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',
        }
    }
})

© 2013 Chart.js is available under the MIT license

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。